关于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

说明:

在使用抽象层时,记住基本原则非常重要,这样您就不会被抽象漏洞所困扰.

你的第一个例子:

让我们用常规的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

在尝试访问optionsvia时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

解:

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

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);
    }
});