说明：

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是类的属性（在其原型上），而不是对象。

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

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

说明：

使用抽象层时，记住基本原则非常重要，这样就不会被abstractions' leaks咬伤。

你的第一个例子：

让我们用常规的Prototypal继承重写你的类定义：

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

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

但是，如果你要通过向构造函数提供Person来创建这个新的options对象：

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

michael 将拥有options属性：

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

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

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

你的第二个例子：

现在考虑你的第二个例子，用原生的Prototypal继承编写：

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

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

无论您是否将options传递给构造函数，您的新对象都不会拥有自己的options属性。您所做的只是在原型上增加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分配新对象，则不会影响原型上的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

解决方案：

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

在构造函数中创建一个新的options属性（init方法）。
从Person.prototype.options复制所有属性。
最后，复制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);
        }
    }
});

更简单的解决方案：

根据您的需要，您可能甚至不需要options首先使用原型。只需将它添加到构造函数中的对象（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);
    }
});

关于John Resig简单继承的属性的奇怪问题

1 个答案:

说明：

你的第一个例子：

你的第二个例子：

解决方案：

更简单的解决方案：