11原型与继承
作者:互联网
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>11原型与继承</title> 9 </head> 10 <body> 11 12 <script> 13 14 /*11.1 原型的初识*/ 15 /*什么是原型对象: 16 (1) 每个对象都有一个原型prototype对象,通过函数创建的对象也将拥有这个原型对象。原型是一个指向对象的指针。 17 (2) 可以将原型理解为对象的父亲,对象从原型对象继承来属性。 18 (3) 原型就是对象除了是某个对象的父母外没有什么特别之处。 19 (4) 所有函数的原型默认是Object的实例,所以可以使用toString/toValues/isPrototypeOf等方法的原因。 20 (5) 使用原型对象为多个对象共享属性或方法。 21 (6) 如果对象本身不存在属性或方法将到原型上查找。 22 (7) 使用原型可以解决,通过构建函数创建对象时复制多个函数造成的内存占用问题。 23 (8) 原型包含constructor属性,指向构造函数。 24 (9) 对象包含__proto__指向他的原型对象。 25 */ 26 27 // let lc = {}; 28 // let chang = {}; 29 // // 判断两个对象的原型是否是同一个 30 // console.log(Object.getPrototypeOf(lc) === Object.getPrototypeOf(chang)); // true 31 32 /*11.2 没有原型的对象*/ 33 /*11.2.1 有原型的对象*/ 34 // let web = {name: "baidu.com"}; 35 // console.log(web); 36 // /* 37 // {name: 'baidu.com'} 38 // name: "baidu.com" 39 // [[Prototype]]: Object 40 // */ 41 // console.log(web.hasOwnProperty("name")); // true 42 // 43 // /*11.2.2 无原型的对象*/ 44 // // 完全数据字典对象 45 // let lc = "123"; 46 // console.log(lc); // 123 47 // let chang = Object.create(null, { 48 // city: "shangHai", 49 // }); 50 // console.log(chang.hasOwnProperty("city")); // 报错 51 52 /*11.3 原型方法与对象方法优先级*/ 53 // 对象方法优先级大于对象原型方法 54 // let web = { 55 // render() { 56 // console.log("对象方法render"); 57 // }, 58 // }; 59 // // 往对象原型中添加方法 60 // web.__proto__.render = function(){ 61 // console.log("对象原型方法render"); 62 // }; 63 // // 打印对象的原型 64 // console.dir(web.__proto__); 65 // console.log(web); 66 // /* 67 // {render: ƒ} 68 // render: ƒ render() 69 // [[Prototype]]: Object 70 // render: ƒ () 71 // */ 72 // // 调用render方法f 73 // web.render(); // 对象方法render 74 75 /*11.4 函数拥有多个长辈*/ 76 // 函数也是对象,有__proto__和prototype两个原型。 77 // 函数当对象使用时,使用__proto__原型;函数当构造函数使用时(实例化对象)使用prototype原型。 78 // let User = function () {}; 79 // console.dir(User); 80 // // 为函数的prototype原型添加方法 81 // User.prototype.show = function () { 82 // console.log("show"); 83 // }; 84 // let hd = new User(); 85 // hd.show(); // show 86 // console.log(User.prototype === hd.__proto__); // true 87 88 /*11.5 原型关系详解与属性继承实例*/ 89 // 为Object函数中的prototype原型添加方法 90 // Object.prototype.show = function () { 91 // console.log("webShow"); 92 // }; 93 // function User() {} 94 // console.dir(User); // ƒ User() 95 // console.log(User.prototype.__proto__ === User.__proto__.__proto__); // true 96 // console.log(Object.prototype.__proto__); // null 97 // let hd = new User(); 98 // hd.show(); // webShow 99 // User.show(); // webShow 100 101 /*11.6 系统构造函数的原型体现*/ 102 // const obj = {}//new Object 103 // console.log(obj.__proto__ == Object.prototype)//true 104 // const arr = []//new Array 105 // console.log(arr.__proto__ == Array.prototype)//true 106 // const str = ''//new String 107 // console.log(str.__proto__ == String.prototype)//true 108 // const bool = false//new Boolean 109 // console.log(bool.__proto__ == Boolean.prototype)//true 110 // const fun = ()=> {} //new Function 111 // console.log(fun.__proto__ == Function.prototype)//true 112 // const reg = /\d+/g //new RegExp 113 // console.log(reg.__proto__ == RegExp.prototype)//true 114 115 /*11.7 自定义对象的原型设置*/ 116 // let web = {name: "baidu.com"}; 117 // let parent = {name: "parent"}; 118 // console.log(web.__proto__ === Object.prototype); // true 119 // // 设置web对象的父级原型是parent对象 120 // Object.setPrototypeOf(web, parent); 121 // console.log(web); 122 // // 查看web对象的父级原型 123 // console.log(Object.getPrototypeOf(web)); 124 125 </script> 126 </body> 127 </html>
/*11.5 原型关系详解与属性继承实例*/
标签:11,__,console,log,继承,对象,原型,prototype 来源: https://www.cnblogs.com/LiuChang-blog/p/16608448.html