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 原型关系详解与属性继承实例*/
浙公网安备 33010602011771号