JS原型链继承

article/2025/9/13 0:35:53

再讲述JS原型链继承之前，我希望大家能够先理解《函数，函数原型和函数实例之间的关系》，这样有助于大家理解JS原型链继承的原理,下面先看一张图吧，咱们看图说话：

如果大家看完了《函数，函数原型和函数实例之间的关系》这篇文章，应该多少能明白原型链继承的原理了。

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

Personal.prototype = new Main () ;

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

Personal.prototype.constructor = Personal ;

完整代码如下：

function Main () {
}
Main.prototype.sex = '男' ;
Main.prototype.eat = function () {console.log('Main eat ...')
}function Personal () {}
Personal.prototype.name = 'hwk';
Personal.prototype.sayName = function () {console.log('Personal name')
}// 继承
Personal.prototype = new Main();
Personal.prototype.constructor = Personal;var p = new Personal();
console.log(p.sex ) ; // 男
console.log(p.name) ; // undefined
p.eat();			  // Main eat ...
p.sayName ();		  // Uncaught TypeError：p.sayName is not a function

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

// 先继承
Personal.prototype = new Main();
Personal.prototype.constructor = Personal;// 后定义属性和方法
Personal.prototype.name = 'hwk';
Personal.prototype.sayName = function () {console.log('Personal name')
}// 正确输出
console.log(p.sex ) ; // 男
console.log(p.name) ; // hwk
p.eat();			  // Main eat ...
p.sayName ();		  // Personal name