其他分享
首页 > 其他分享> > 11原型与继承

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