Question

在编写JavaScript程序时，我经常使用Crockford的原型模式。我以为我理解了所有涉及的“陷阱”，但我发现了一个我之前没想过的。我想知道是否有人有最好的处理方法。

这是一个简单的例子：

// Here's the parent object
var MyObject = {
    registry: {},
    flatAttribute: null,
    create: function () {
        var o, F = function () {};

        F.prototype = this;
        o = new F();
        return o;
    }
};

// instance is an empty object that inherits
// from MyObject
var instance = MyObject.create();

// Attributes can be set on instance without modifying MyObject
instance.flatAttribute = "This is going to be applied to the instance";

// registry doesn't exist on instance, but it exists on
// instance.prototype. MyObject's registry attribute gets
// dug up the prototype chain and altered. It's not possible
// to tell that's happening just by examining this line.
instance.registry.newAttribute = "This is going to be applied to the prototype";

// Inspecting the parent object
// prints "null"
console.log(MyObject.flatAttribute);
// prints "This is going to be applied to the prototype"
console.log(MyObject.registry.newAttribute);

我希望看起来对实例做出的任何更改都不会传播继承更改。当属性是对象并且我正在设置嵌套属性时，情况并非如此。

解决方案是重新初始化实例上的所有对象属性。但是，使用此模式的一个明显的优点是从构造函数中删除重新初始化代码。我正在考虑克隆父项的所有对象属性并在create（）函数中的实例上设置它们：

{ create: function () {
    var o, a, F = function () {};

    F.prototype = this;
    o = new F();
    for (a in this) {
        if (this.hasOwnProperty(a) && typeof this[a] === 'object') {
            // obviously deepclone would need to be implemented
            o[a] = deepclone(this[a]);
        }
    }
    return o;
} };

有更好的方法吗？

Answer 1

有一个非常简单的解决方案可以确保它们只是实例变量，即在构造函数中使用this关键字。

var MyObject = {
    flatAttribute: null,
    create: function () {
        var o, F = function () {
           this.registry  = {}
        };

        F.prototype = this;
        o = new F();
        return o;
   }
};

这确保了“instance.registry。*”的所有属性都是实例的本地属性，因为javascript opject的查找顺序如下所示。

object -> prototype -> parent prototype ...

所以通过向名为“registry”的构造函数中的实例添加一个变量，该变量将始终首先被找到。

另一种解决方案，我认为更优雅的是不使用crockford（java风格）构造函数并使用更自然地反映javascripts对象系统的布局。大多数问题都来自于练习和语言之间的错误。

// instance stuff
var F = function () {
   this.registry  = {}
};

F.prototype = {
    // static attributes here
    flatAttribute: null,
    methodA: function(){ 
        // code here 'this' is instance object
        this.att = 'blah';
    }
};

var instanceA = new F();
instanceA.registry['A'] = 'hi';
var instanceB = new F();
instanceB.registry['B'] = 'hello';

instanceA.registry.A == 'hi'; // true
instanceB.registry.B == 'hello'; // true
F.prototype.registry == undefined; // true

Answer 2

这会给你预期的结果吗？这里我没有使用Object文字，而是使用父对象（Base）的即时实例化构造函数：

var Base = ( function(){
     function MyObject(){
     this.registry = {},
     this.flatAttribute = null;
     if (!MyObject.prototype.create)   
      MyObject.prototype.create = function(){
       return new this.constructor();
      };
     }
     return new MyObject;
    } )(),
// create 2 instances from Base
instance1 = Base.create(),
instance2 = Base.create();

// assign a property to instance1.registry
instance1.registry.something = 'blabla';

// do the instance properties really belong to the instance?
console.log(instance1.registry.something); //=>  'blabla'
console.log(instance2.registry.something === undefined); //=>  true

但它有点虚拟。如果您不想使用new运算符（我认为这完全是它的想法），以下为您提供了一种方法，无需创建方法：

function Base2(){
     if (!(this instanceof Base2)){
         return new Base2;
     }
     this.registry = {}, 
     this.flatAttribute = null;
     if (!Base2.prototype.someMethod){
         var proto = Base2.prototype;
         proto.someMethod = function(){};
         //...etc
     }
}
//now the following does the same as before:
var  instance1 = Base2(),
     instance2 = Base2();

// assign a property to instance1.registry
instance1.registry.something = 'blabla';

// do the instance properties really belong to the instance?
console.log(instance1.registry.something); //=>  'blabla'
console.log(instance2.registry.something === undefined); //=>  true

jsfiddle

中的示例

Answer 3

我总是想记住object.Create是一个选项，而不是在javascript中实现非经典继承的唯一方法。

对于我自己，我总是发现当我想从父对象原型链继承元素时（即我希望能够应用于继承对象的方法），Object.create最有效。

-

对于简单的＆＃34;自有财产＆＃34;继承，Object.create在很大程度上是不必要的。当我想继承自己的属性时，我更喜欢使用流行的 Mixin ＆amp; 扩展模式（简单地将一个对象的属性复制到另一个对象，而不必担心原型或＆＃34; new＆＃34;）。

在 Stoyan Stefanov 一书 ＆＃34; Javascript Patterns＆＃34; 中，他举了一个深度扩展函数的例子来做什么您正在寻找递归，并包括对数组属性以及标准键/值对象的支持：

function extendDeep(parent, child){
    var i,
        toStr = Object.prototype.toString,
        astr = "[object Array]";

    child = child || {};

    for (i in parent) {
        if (parent.hasOwnProperty(i)) {
            if (typeof parent[i] === "object") {
                child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
                extendDeep(parent[i], child[i]);
            } else { 
                child[i] = parent[i];
            }
        }
    }
    return child;
}

如果你正在使用jQuery， jQuery.extend（）有一个可选的＆＃34;深＆＃34;允许您以几乎相同的方式扩展对象的参数。

Answer 4

我认为您正在使用原型继承来模拟经典，面向对象的继承。

你想要做的是停止原型方法查找，这限制了它的表现力，为什么要使用它？使用此功能模式：

可以达到相同的效果

var MyObject = function() {
    // Declare here shared vars
    var global = "All instances shares me!";

    return {
        'create': function() {
            var flatAttribute;
            var register = {};

            return {
                // Declare here public getters/setters
                'register': (function() {
                    return register;
                })(),
                'flatAttribute': (function() {
                    return flatAttribute;
                })(),
                'global': (function() {
                    return global;
                })()
            };
        }
    };
}();


var instance1 = MyObject.create();
var instance2 = MyObject.create();

instance1.register.newAttr = "This is local to instance1";
instance2.register.newAttr = "This is local to instance2";
// Print local (instance) var
console.log(instance1.register.newAttr);
console.log(instance2.register.newAttr);
// Print global var
console.log(instance1.global);
console.log(instance2.global);

<强> Code on jsFiddle

Crockford风格的原型图案;寻找一个优雅的解决方案

4 个答案: