JS原型链

 如上图所示： Personal 对象想要继承 Main 对象，则通过将 Main 的实例赋值给 Personal 的原型对象 :

Personal.prototype = new Main () ;

如此 Personal原型对象 就能通过 Main 对象的实例中的 [[Prototype]] 来访问到 Main原型对象 中的属性和方法了，而此时大家注意，Personal原型对象 则与 Personal函数 断开了联系，因为Personal原型对象被重新赋值了，所以还需要重新将Personal函数和Personal原型对象建立联系:

Personal.prototype.constructor = Personal ;

完整代码如下：

 1 function Main () {
 2 }
 3 Main.prototype.sex = '男' ;
 4 Main.prototype.eat = function () {
 5     console.log('Main eat ...')
 6 }
 7 
 8 
 9 function Personal () {}
10 Personal.prototype.name = 'hwk';
11 Personal.prototype.sayName = function () {
12     console.log('Personal name')
13 }
14 
15 // 继承
16 Personal.prototype = new Main();
17 Personal.prototype.constructor = Personal;
18 
19 var p = new Personal();
20 console.log(p.sex ) ; // 男
21 console.log(p.name) ; // undefined
22 p.eat();              // Main eat ...
23 p.sayName ();          // Uncaught TypeError：p.sayName is not a function

运行如上代码你会发现 p.name 为 undefined , p.sayName 这个方法没找到，原因在于我们后面重新赋值了 Personal.prototype = new Main(); 因此找不到一开始定义在 Personal.prototype 上的name属性和sayName方法，因此在使用原型链继承的时候，要在继承之后再去在原型对象上定义自己所需的属性和方法：

 1 // 先继承
 2 Personal.prototype = new Main();
 3 Personal.prototype.constructor = Personal;
 4 
 5 // 后定义属性和方法
 6 Personal.prototype.name = 'hwk';
 7 Personal.prototype.sayName = function () {
 8     console.log('Personal name')
 9 }
10 
11 // 正确输出
12 console.log(p.sex ) ; // 男
13 console.log(p.name) ; // hwk
14 p.eat();              // Main eat ...
15 p.sayName ();          // Personal name

PS:在原型对象上定义属性和方法，其所有的构造函数实例都能共享原型上的属性和方法，因此如果某一个构造函数实例对象修改了原型对象上的属性值和方法，则也会影响其他实例对象。

 1         // 原型链   由继承转换成的原型链   原型链最终指向Object  object最终的返回值是null
 2         // console.dir(stu.__proto__===Student.prototype)
 3         // console.dir(Student.prototype.__proto__===People.prototype)
 4         // console.dir(stu.__proto__.__proto__===People.prototype)
 5         // console.dir(People.prototype.__proto__.__proto__)
 6         console.dir(stu.__proto__.__proto__.__proto__.__proto__)
 7         // __proto__.__proto__.__proto__.__proto__
 8             // Student.prototype
 9                 // People.prototype
10                     // object.prototype
11                         // null

 

posted @ 2021-11-18 00:14  .Nice  阅读(34)  评论(0)    收藏  举报