11原型与继承

2022-08-20 19:33:25 阅读：236 来源： 互联网

标签：11 __ console log 继承对象原型 prototype

  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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

11原型与继承