不在OLOO继承中共享对象属性 [英] Not sharing object properties in OLOO inheritance

查看:65
本文介绍了不在OLOO继承中共享对象属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不确定最佳方法是为OLOO继承链中的每个对象提供单独的对象属性。



检查这个小提琴或考虑以下内容代码:



确定然后,我该怎么做才能解决这个问题?我想到了两个选项:



选项1)
http://jsfiddle.net/HB7LU/19419/

  Parent = function(){
return {
array:[],

add:function(element){
this.array.push( element + this.array.length.toString());
返回此;
},

getAll:function(){
return this.array;
}
};
};

Child = Object.create(Parent(),{
removeAllButOne:{value:function(){
this.array.splice(1);
return这个;
}}
});

foo = Object.create(Parent());
foo.add('foo');

bar = Object.create(Child);
bar.add('bar');

这将创建一个新的Parent对象,每次Parent对象创建Parent对象的所有函数已创建或子项从(新)父对象继承。虽然这解决了我遇到的问题,但总是为每个子类型对象反复重新创建相同的函数似乎是一个坏主意。



选项2 )
http://jsfiddle.net/HB7LU/19420/

  Parent = Object.create({
add:function(element){
this.array。 push(element + this.array.length.toString());
返回此;
},

getAll:function(){
return this.array ;
}
},{
ctor:{value:function(someArgs){
this.array = [];
//也许使用someArgs
返回此;
}}
});

Child = Object.create(Parent,{
removeAllButOne:{value:function(){
this.array.splice(1);
返回此项;
}}
});

foo = Object.create(Parent).ctor();
foo.add('foo');

bar = Object.create(Child).ctor();
bar.add('bar');

这似乎也解决了问题,但避免重新创建Parent对象及其功能。这是要走的路吗?如果我在继承链中有多个子项也有私有属性会怎么样?



这样的东西?

  Child = Object.create(Parent,{
ctor:{value:function(someArgs){
this .__ proto __。ctor(someArgs);
this .otherPrivate = {};
//也许使用someArgs
返回此;
}},

removeAllButOne:{value:function(){
this.array.splice(1);
返回此;
}}
});

孩子们会用他们自己的功能遮蔽父母ctor ...但是在他们的ctor功能中他们可以打电话给父母,不要破坏功能。



非常感谢您的意见和建议,谢谢!

解决方案

最简单的方法是使用构造函数,因此数组总是在实例

上创建为自己的属性 >

  // define Parent 
function Parent(){
this.array = []; //数组将是一个实例属性
}
Parent.prototype = {}; //继承Object.prototype的所有好东西
Object.assign(Parent.prototype,{//使用`Object.assign`代表简写
add:function(element){
this。 array.push(element + this.array.length.toString());
返回此;
},
getAll:function(){
return this.array;
}
});

//定义Child
函数Child(){
Parent.apply(this); //将Parent构造函数应用于实例
}
Child.prototype = Object.create(Parent.prototype); //继承父的原型链
Object.assign(Child.prototype,{
removeAllButOne:function(){
this.array.splice(1);
返回此;
}
});

现在有

  var a = new Child(),
b = new Child();
a.array === b.array; // false






您也可以使用 ES 6的类,但这只是我上面所写的语法糖,并且会产生相同的结构。


I'm not sure on the best approach to have object properties that are individual for each object in a OLOO inheritance chain.

Check this fiddle or consider the following code: http://jsfiddle.net/HB7LU/19413/

Parent = {
    array: [],

    add: function(element) {
        this.array.push(element + this.array.length.toString());
        return this;
    },

    getAll: function() {
        return this.array;
    }
};

Child = Object.create(Parent, {
    removeAllButOne: { value: function() {
        this.array.splice(1);
        return this;
    }}
});

foo = Object.create(Parent);
foo.add('foo');

bar = Object.create(Child);
bar.add('bar');

In the fiddle a click on the foo or bar text will call the foo.add(...) or bar.add(...) function to add an element to the objects array, resulting in one extra <p> tag in the output.
The result is not what I want. Both foo and bar share the same array. But its easy to understand what happens, if we look up the object inheritance we can see the following:

Ok then, what can I do go get around this? There were two options that came to my mind:

Option 1) http://jsfiddle.net/HB7LU/19419/

Parent = function() {
    return {
        array: [],

        add: function(element) {
            this.array.push(element + this.array.length.toString());
            return this;
        },

        getAll: function() {
            return this.array;
        }
    };
};

Child = Object.create(Parent(), {
    removeAllButOne: { value: function() {
        this.array.splice(1);
        return this;
    }}
});

foo = Object.create(Parent());
foo.add('foo');

bar = Object.create(Child);
bar.add('bar');

This would create a new Parent object, creating all the functions of the Parent object each time a Parent object is created or a child "inherits" from a (new) Parent object. While this solves the problem I had, it seems like a bad idea to always recreate the same functions over and over again for each child type object.

Option 2) http://jsfiddle.net/HB7LU/19420/

Parent = Object.create({
    add: function(element) {
        this.array.push(element + this.array.length.toString());
        return this;
    },

    getAll: function() {
        return this.array;
    }
}, {
    ctor: { value: function(someArgs) {
        this.array = [];
        // maybe use someArgs
        return this;
    }}
});

Child = Object.create(Parent, {
    removeAllButOne: { value: function() {
        this.array.splice(1);
        return this;
    }}
});

foo = Object.create(Parent).ctor();
foo.add('foo');

bar = Object.create(Child).ctor();
bar.add('bar');

This seems to also solve the problem but avoids the recreation of the Parent object and its functions. So is this the way to go? What if I had multiple children in the inheritance chain that also have private properties?

Something like this?

Child = Object.create(Parent, {
    ctor: { value: function(someArgs) {
        this.__proto__.ctor(someArgs);
        this.otherPrivate = {};
        // maybe use someArgs
        return this;
    }},

    removeAllButOne: { value: function() {
        this.array.splice(1);
        return this;
    }}
});

Children would be shadowing the parent ctor with their own function... but in their ctor function they could call the parents ctor to not break functionality.

Thoughts and advice is highly appreciated, thanks!

解决方案

Easiest way is to use Constructors so array is always created as an own property on the instance

// define Parent
function Parent() {
    this.array = []; // array will be an instance property
}
Parent.prototype = {}; // inherit all the goodies from Object.prototype
Object.assign(Parent.prototype, { // using `Object.assign` for shorthand
    add: function (element) {
        this.array.push(element + this.array.length.toString());
        return this;
    },
    getAll: function () {
        return this.array;
    }
});

// define Child
function Child() {
    Parent.apply(this); // apply Parent constructor to the instance
}
Child.prototype = Object.create(Parent.prototype); // inherit Parent's prototype chain
Object.assign(Child.prototype, {
    removeAllButOne: function () {
        this.array.splice(1);
        return this;
    }
});

Now have

var a = new Child(),
    b = new Child();
a.array === b.array; // false


You could also write this using ES 6's classes, but that is just syntactic sugar for what I've written above and will result in the same structures.

这篇关于不在OLOO继承中共享对象属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆