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

Question

我是指这篇文章。我基本上是创建一个类与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

---

<标题>解释:

当使用抽象层时，记住底层的原则是非常重要的，这样你就不会被抽象的泄漏所伤。

第一个例子:

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

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时，您将从原型链中获得{value: 2}。

但是，如果您要通过向构造函数提供options来创建这个新的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

---

第二个例子:

现在考虑第二个用原生原型继承编写的例子:

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

---

<标题>解决方案:要在第二个示例中获得所需的功能，必须遵循以下步骤:

1. 在构造函数中创建一个新的options属性(init方法)
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或下划线，你可以使用他们的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);
    }
});