javascript - Backbone.extend 函数究竟是如何工作的？

Question

我想知道这个 extend 函数在 Backbone.js 中是如何工作的。请在内部帮助我了解它到底在做什么。

var extend = function(protoProps, staticProps) {
    var parent = this;
    var child;

    // The constructor function for the new subclass is either defined by you
    // (the "constructor" property in your `extend` definition), or defaulted
    // by us to simply call the parent constructor.
    if (protoProps && _.has(protoProps, "constructor")) {
      child = protoProps.constructor;
    } else {
      child = function() {
        return parent.apply(this, arguments);
      };
    }

    // Add static properties to the constructor function, if supplied.
    _.extend(child, parent, staticProps);

    // Set the prototype chain to inherit from `parent`, without calling
    // `parent`'s constructor function and add the prototype properties.
    child.prototype = _.create(parent.prototype, protoProps);
    child.prototype.constructor = child;

    // Set a convenience property in case the parent's prototype is needed
    // later.
    child.__super__ = parent.prototype;

    return child;
  };

这里为什么父变量被添加到子变量？

Answer 1

extend有两个参数 protoProps和 staticProps . protoProps是将分配给 Class 原型(prototype)的属性，因此当您创建对象的实例时，该对象将将该属性作为其原型(prototype)链的一部分 1 . staticProps是从类创建的对象不可用的 Prop (使用 new )，但可以从类本身访问，例如，通过调用 CatClass.defaultMeow .

var extend = function(protoProps, staticProps) {
    var parent = this;
    var child;

在下面的讨论中parent是我们将称之为基类的类，我们要将其原型(prototype)扩展到 child 的类，这里我们称之为扩展类。

    // The constructor function for the new subclass is either defined by you
    // (the "constructor" property in your `extend` definition), or defaulted
    // by us to simply call the parent constructor.
    if (protoProps && _.has(protoProps, "constructor")) {
      child = protoProps.constructor;

如果protoProps是一个函数，或者有一个 constructor property(这是当你在一个类上调用 new 时被调用的属性(作为一个方法))。

    } else {
      child = function() {
        return parent.apply(this, arguments);
      };
    }

如果不是，扩展类将使用父类的 constructor (当您调用 new 时，它将调用父级的 constructor 方法)。

    // Add static properties to the constructor function, if supplied.
    _.extend(child, parent, staticProps);

_.extend(target, src1,...,srcN) UnderscoreJS 方法将源对象的属性浅拷贝到目标对象。这里复制了所有父(静态)属性，并将所有属性传递给 staticProp。对象(如果提供)到新的扩展类。

    // Set the prototype chain to inherit from `parent`, without calling
    // `parent`'s constructor function and add the prototype properties.
    child.prototype = _.create(parent.prototype, protoProps);

这可能是 Backbone.extend 例程最重要的功能:这是扩展类“继承”基类原型(prototype)链的地方。例如，如果 AnimalClass.prototype.walk是 AnimalClass 原型(prototype)链中的一个方法, _.create(parent.prototype, protoProps)将使用 walk 创建一个新类这个新类原型(prototype)链中的方法，以及所有 protoProps传入。这本质上是 _extended 原型(prototype)链，它被分配给扩展类，因为它是原型(prototype)。

 child.prototype.constructor = child;

这一行起初令人困惑，因为我们在上面的条件语句中看到扩展类已经分配了一个构造函数。好吧，确实如此，但在最后的声明中，我们做了 _.create(...)我们用基类的构造函数覆盖了扩展类的构造函数!现在我们重新分配它。

    // Set a convenience property in case the parent's prototype is needed
    // later.
    child.__super__ = parent.prototype;

正如评论所说，扩展类可以访问 ***static 属性中的基类* __super__ .它是一个方便的属性，可以从扩展类对象本身访问。那么，在我们之前的示例中，如果一个 CatClass从 AnimalClass 扩展而来，则以下为真:CatClass.__super__ === AnimalClass .

    return child;
  };