javascript - JavaScript 中的原型(prototype)链

Question

我正在阅读一本名为 JavaScript 模式的书，但我认为其中有一部分让人感到困惑。

这家伙实际上在书中引导了类设计模式，他在其中逐个开发它。他首先提出问题:

function inherit(C, P) {
C.prototype = P.prototype;
}

他说:

“这为您提供了简短而快速的原型(prototype)链查找，因为所有对象实际上共享相同的原型(prototype)。但这也是一个缺点，因为如果一个 child 或孙子继承链下游的某个地方修改了原型(prototype)，它影响了所有的 parent 和祖 parent 。"

但是，我实际上尝试修改 Child 中的原型(prototype) say() 并且它对 Parent 没有影响，事实上 Child 仍然指向 Parent 并且完全忽略了它自己的同名原型(prototype)，这是有道理的，因为它指向一个不同的内存位置。那么这家伙怎么能说出这样的话呢？下面证明了我的观点:

function Parent(){}

Parent.prototype.say = function () {
return 20;
};

function Child(){
}

Child.prototype.say = function () {
return 10;
};

inherit(Child, Parent);

function inherit(C, P) {
C.prototype = P.prototype;
 } 

 var parent = new Parent();
var child = new Child();


var child2 = new Child()
alert(child.say(); //20
alert(parent.say()); //20
alert(child2.say()); //20

任何子孙都不可能修改原型(prototype)!

这引出了我的第二点。他说，解决可能意外修改继承链下的父原型(prototype)(我无法重现)的问题的解决方案是打破父原型(prototype)和子原型(prototype)之间的直接链接，同时从原型(prototype)链中受益。他提供以下解决方案:

function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
}

问题是这会输出与其他模式完全相同的值:

function Parent(){}

Parent.prototype.say = function () {
return 20;
};

function Child(){
}

 Child.prototype.say = function () {
return 10;
};

inherit(Child, Parent);

function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
}

var parent = new Parent();
var child = new Child();


var child2 = new Child()
alert(child.say(); //20
alert(parent.say()); //20
alert(child2.say()); //20

空函数以某种方式断开链接是没有意义的。实际上，Child指向F，F又指向Parent的原型(prototype)。所以他们都仍然指向相同的内存位置。这在上面进行了演示，它输出与第一个示例相同的精确值。我不知道这位作者试图证明什么，也不知道他为什么提出不适合我且我无法复制的声明。

感谢回复。

Answer 1

第一点:

这个人想说的是，如果您在创建实例后修改原型(prototype)，则子项和父项的方法都会发生变化。

例如:

function inherit(C, P) {
  C.prototype = P.prototype;
} 

function Parent(){}
function Child(){}

inherit(Child, Parent);

Parent.prototype.say = function () {
  return 20;
};

var parent = new Parent();
var child = new Child();


// will alert 20, while the method was set on the parent.
alert( child.say() );

当您更改子项的构造函数(与父项共享)时会发生同样的事情。

// same thing happens here, 
Child.prototype.speak = function() {
  return 40;
};

// will alert 40, while the method was set on the child
alert( parent.speak() );

---

关于你的第二点:

function inherit(C, P) {
  var F = function () {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

新的继承函数实际上将父类和子类的构造函数分开了，因为它不再指向同一个对象，而是指向一个与父类无关的新创建函数的原型(prototype)。因此，您实际上创建了父构造函数的本地副本，然后创建该副本的新实例，它返回所有构造函数方法和属性。现在改变子的构造函数，不会影响父。

function inherit(C, P) {
  var F = function () {};
  F.prototype = P.prototype;
  C.prototype = new F();
}

function Parent(){}
function Child(){}

inherit(Child, Parent);

// same thing happens here, 
Child.prototype.speak = function() {
  return 40;
};

var parent = new Parent();

// will throw an error, because speak is undefined
alert( parent.speak() );