javascript - 这两种继承有什么区别？

Question

说说这两种继承的区别？

function inherit(c,p){
    var F =function(){}
    F.prototype=p.prototype;
    c.prototype=new F();
}

和

function inherit(c,p){
    c.prototype=p.prototype;
}

如果有的话，各自的优缺点是什么？

Answer 1

在第二个中，c 和 p 最终都使用了相同对象作为它们的原型(prototype)属性.因此，向该对象添加一些内容会影响使用 new c 和 new p 创建的实例，因为这些实例从 prototype 属性获取其底层原型(prototype)功能。这是一个问题， child 不应该像那样影响 parent 的实例。

例如，使用第二个，我们有这个问题:

function Parent() {
}
function Child() {
}
inherit(Child, Parent);
Parent.prototype.question = "Life, the Universe, and Everything";
Child.prototype.answer = 42;
var par = new Parent();
var ch = new Child();
console.log(par.question); // "Life, the Universe, and Everything"
console.log(ch.question);  // "Life, the Universe, and Everything"
console.log(par.answer);   // 42 <=== WRONG, Parent instances don't have the property
console.log(ch.answer);    // 42

上面的代码在内存中创建了这种情况(让我们使用一个名为 __proto__ 的属性来表示对象的底层原型(prototype)；即将到来的 ES6 规范就是这样做的):

                        The second one: Wrong+-----------------+| Function Parent |+-----------------+          +---------------+| prototype       |----+++-->| Object        |+-----------------+    |||   +---------------+                       |||   | question: ... |+------------+         |||   | answer: 42    || Parent par |         |||   +---------------+ +------------+         |||| __proto__  |---------+||+------------+          ||                        ||+-----------------+     ||| Function Child  |     ||+-----------------+     ||| prototype       |-----+|+-----------------+      |                         |+-----------+            || Child ch  |            |+-----------+            || __proto__ |------------++-----------+

With the first one, the c.prototype is a new object that has p.prototype as its underlying prototype. Adding things to c.prototype won't affect instances created with new p, just ones created with new c. But adding things to p.prototype affects both, which makes sense if c is meant to inherit from p.

function Parent() {
}
function Child() {
}
inherit(Child, Parent);
Parent.prototype.question = "Life, the Universe, and Everything";
Child.prototype.answer = 42;
var par = new Parent();
var ch = new Child();
console.log(par.question); // "Life, the Universe, and Everything"
console.log(ch.question);  // "Life, the Universe, and Everything"
console.log(par.answer);   // undefined, Parent instances don't have the property
console.log(ch.answer);    // 42

在内存中设置:

                            The first one+-----------------+| Function Parent |+-----------------+          +---------------+| prototype       |----+---->| Object        |<-++-----------------+    |     +---------------+  |                       |     | question: ... |  |+------------+         |     +---------------+  || Parent par |         |                        |+------------+         |                        || __proto__  |---------+                        |+------------+                                  |                                                |+-----------------+                             || Function Child  |                             |+-----------------+          +---------------+  || prototype       |------+-->| Object        |  |+-----------------+      |   +---------------+  |                         |   | __proto__     |--++-----------+            |   | answer: 42    || Child ch  |            |   +---------------++-----------+            || __proto__ |------------++-----------+

What are the pros and cons of each if there are such?

The second one is effectively wrong. :-)

---

Side note: In an ES5-enabled environment, the first one can be simpler:

function inherit(c,p){
    c.prototype = Object.create(p.prototype);
}

---

旁注 2:为了更彻底，第一个应该如下所示:

function inherit(c,p){
    var F =function(){}
    F.prototype=p.prototype;
    c.prototype=new F();
    c.prototype.constructor = c;
}

或者这个:

function inherit(c,p){
    c.prototype = Object.create(p.prototype);
    c.prototype.constructor = c;
}

从 Function 对象的 prototype 属性引用的对象的 constructor 属性应该指向该函数。这就是规范中函数的设置方式，尽管它实际上并没有使用 constructor 属性。不过，有些人可能有使用它的代码，并希望规范的设置在那里。