JavaScript继承问题

Question

这是《Pro JavaScript Design Patterns》一书中的扩展函数，

function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
    subClass.superclass = superClass.prototype;
    if(superClass.prototype.constructor == Object.prototype.constructor) {
       superClass.prototype.constructor = superClass;
    }
}

我对前 3 行有问题...它创建一个空函数，然后将 F.prototype 设置为 superClass.prototype，这意味着（对于 2 个新的构造函数例如 foo、bar 和 foo 扩展 bar），F.prototype 将有一个构造函数属性： bar 和 proto :Object，或者不是？ 第 3 行： subClass.prototype = new F();发生了一些我无法理解的事情。为什么当 F 的 [[Prototype]] 是 Object 时继承发生在这里？

---

有什么区别

subClass.prototype = new superClass();

前3行和代码执行时 ？我的意思是第一个与第二个的作用相同。

---

只是添加一个对子类中超类构造函数的调用。 调用的是“className”.superclass.constructor.call(this);

Answer 1

function extend(subClass, superClass) {

    // create a new empty function
    var F = function() {}; 

    // set the prototype of that function to prototype object of the superclass
    F.prototype = superClass.prototype;

    // now set the prototype of the subClass to a new instance of F
    // this is done so that subClass.prototype.foo = does not affect
    // superClass.prototype.foo
    // if you don't do this, changes to one subClass will affect superClass and all
    // other subClasses of superClass
    subClass.prototype = new F();

注意：subClass.prototype = new superClass() 将调用构造函数并使用返回的新对象作为原型。这将导致 superClass 本身的属性出现在原型链上（因为该实例是原型对象）。

    // set the constructor, this indicates that 'subClass' is a function
    subClass.prototype.constructor = subClass;

    // add a property to indicate what the superClass is
    // this way one can call super methods via this.superclass.something
    subClass.superclass = superClass.prototype;

    // in case the superClass was an object...
    if(superClass.prototype.constructor == Object.prototype.constructor) {

       // change the constructor?
       // no idea why they do this here
       // this introduces a side effect to the function
       superClass.prototype.constructor = superClass;
    }
}

Answer 2

我们有构造函数：

F 、 Super & 子。

我们有对象 f 、 super 和 &使用上述构造函数创建的 sub 。

即 f = new F 、 super = new Super 、 sub = new Sub

我们知道 f.__proto__ === super.__proto__ === Super.prototype 来自第 2 行

从第 3 行我们可以看到 sub.__proto__ === f & sub.__proto__.__proto__ === Super.prototype

另外，我们在第 5 行

和第 4 行和第 5 行中都有 Sub.superClass === Super.prototype 。 6 我们可以说 sub.constructor === Sub & super.constructor === Super

我们可以在第 3 行第 7 行之前调用 new F 的原因是因为第 7 行设置了

f.__proto__.constructor == = Super 其中 f.constructor 已经是 Sub。基本上，第 7 行正在清理 Super ，并且根本不会影响 Sub ，因为您永远不应该在实际代码中调用 .__proto__.constructor 。

这个特定的函数不会显式地调用 Super 作为函数，而只是确保通过 Sub 构造的对象在其链中具有 Super.prototype 。

Answer 3

作为替代方案，您可以考虑原型 javascript 库。其中包括继承。

原型 Javascript 库

以下是原型文档中的示例。

var Animal = Class.create({
  initialize: function(name, sound) {
    this.name  = name;
    this.sound = sound;
  },

  speak: function() {
    alert(this.name + " says: " + this.sound + "!");
  }
});

// subclassing Animal
var Snake = Class.create(Animal, {
  initialize: function($super, name) {
    $super(name, 'hissssssssss');
  }
});

var ringneck = new Snake("Ringneck");
ringneck.speak();
//-> alerts "Ringneck says: hissssssssss!"

var rattlesnake = new Snake("Rattler");
rattlesnake.speak();
//-> alerts "Rattler says: hissssssssss!"

这是文档页面