javascript - John Resig 简单继承属性的奇怪问题

Question

我指的是 this article .我基本上是在创建一个带有 init 函数的类，该函数设置了一个 options 属性。见http://jsbin.com/usaboh/1/edit对于工作示例(启用控制台以查看输出)。

下面的第一个示例工作正常，但是第二个示例仍然获得第一个“实例”的 options 值。

按预期工作:

var Person = Class.extend({
    options: {value: 2},
    init: function(options){
        if(options) {
            this.options = options;
        }
    }
});

var p = new Person({value: 5});
console.log(p.options); //{"value": 5} (ok)

var p2 = new Person();
console.log(p2.options); //{"value": 2} (ok)

没有按预期工作:

var Person = Class.extend({
    options: {value: 2},
    init: function(options){
        if(options) {
            for (var name in options) {
                this.options[name] = options[name];
            }
        }
    }
});

var p = new Person({value: 5});
console.log(p.options); //{"value": 5} (ok)

var p2 = new Person();
console.log(p2.options); //{"value": 5} (why 5 ??? shouldn't be 2 ?)

为什么第二个实例中的 options 的值不是第一个实例中的 {"value": 2}？

Answer 1

那是因为 options 是类的属性(在其原型(prototype)上)，而不是对象。

通过将此添加到第二个示例的底部来验证它:

console.log( p.options == p2.options ); // true

---

说明:

使用抽象层时，记住底层原则非常重要，这样你就不会被 abstractions' leaks 所困扰。 .

你的第一个例子:

让我们用常规的原型(prototype)继承重写你的类定义:

var Person = function (options) {
    if (options) {
        this.options = options;
    }
};

Person.prototype.options = {value: 2};

var john = new Person();

john 现在将成为 Person 的新实例，并且不会具有options 属性:

john.hasOwnProperty('options'); // false

当尝试通过 john.options 访问 options 时，您将从原型(prototype)链中获得 {value: 2}。

但是，如果您通过向构造函数提供选项 来创建这个新的Person 对象:

var michael = new Person({value:5});

michael 将 有一个 options 属性:

michael.hasOwnProperty('options'); // true

这是一个比较两者的简单测试:

john.options == Person.prototype.options // true
michael.options == Person.prototype.options // false

---

你的第二个例子:

现在考虑你的第二个例子，用原生原型(prototype)继承编写:

var Person = function (options) {
    if (options) {
        for (var name in options) {
            this.options[name] = options[name];
        }
    }
};

Person.prototype.options = {value: 2};

无论您是否将 options 传递给构造函数，您的新对象都不会拥有自己的 options 属性。您所做的只是增加原型(prototype)上的 options:

var john = new Person();
john.options // {value:2}
john.hasOwnProperty('options'); // false
john.options == Person.prototype.options // true

var michael = new Person({value:5});
michael.options // {value:5}
michael.hasOwnProperty('options'); // false
michael.options == Person.prototype.options // true

john.options // {value:5}
// Why? Because they share the same `options` property from the prototype
john.options == michael.options // true

如果您随后将一个新对象分配给 john，它不会影响原型(prototype)上的 options:

john.options = {value:10};
john.options // {value:10}
john.options == Person.prototype.options // false
michael.options // {value:5}
michael.options == john.options // false
michael.options == Person.prototype.options // true

---

解决方案:

要在第二个示例中获得所需的功能，您必须执行以下步骤:

1. 从构造函数(init 方法)中创建一个新的 options 属性。
2. 复制 Person.prototype.options 中的所有属性。
3. 最后，复制 options 参数中的所有属性。

以下是您可以这样做的方法:

var Person = Class.extend({
    options: {value: 2},
    init: function(options) {
        if (options) {
            var name, prototypeOptions = Person.prototype.options;
            this.options = {};

            for (name in prototypeOptions) {
                this.options[name] = prototypeOptions[name];
            }

            for (name in options) {
                this.options[name] = options[name];
            }
        }
    }
});

如果您使用 jQuery或 underscore ，您可以使用他们的 extend 方法，这让这一切变得微不足道:

var Person = Class.extend({
    options: {value: 2},
    init: function(options) {
        if (options) {
            this.options = $.extend({}, Person.prototype.options, options);
        }
    }
});

---

更简单的解决方案:

根据您的需要，您甚至可能一开始就不需要将选项放在原型(prototype)上。只需将它添加到构造函数中的对象(init 方法)，然后就可以完成了:

var Person = Class.extend({
    init: function(options) {
        this.options = {value: 2};
        if (options) {
            for (var name in options) {
                this.options[name] = options[name];
            }
        }
    }
});

再一次，如果您使用 jQuery 或下划线，这会变得更加简单:

var Person = Class.extend({
    init: function(options) {
        this.options = _.extend({value: 2}, options);
    }
});