不在OLOO继承中共享对象属性

时间:2015-10-31 18:20:43

标签: javascript

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

检查这个小提琴或考虑以下代码: http://jsfiddle.net/HB7LU/19413/

<script>
 $(document).ready(function(){
   var interval = function(){
        $.ajax({
            url: "<?php echo base_url('home/get') ?>",
            cache: false,
            success: function (html) {
                $("#results").text(html); // you can use .append(html) instead of .text(html) to append new data to div
            },
           Timeout:2000
       });
    });
    //var get_new_data = setInterval(interval , 5000); 
    setInterval(interval , 5000);// it will refresh ajax every 5 seconds you can use a previous line if you need to stop interval by using clearInterval(get_new_data);
});
</script>

在小提琴中单击foo或bar文本将调用foo.add(...)或bar.add(...)函数将元素添加到objects数组中,从而产生一个额外的{{ 1}}输出中的标签 结果不是我想要的。 foo和bar都共享相同的数组。但是很容易理解会发生什么,如果我们查找对象继承,我们可以看到以下内容: inheritance

那么,我该怎么做才能解决这个问题?我想到了两种选择:

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

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

这会创建一个新的Parent对象,每次创建一个Parent对象时创建Parent对象的所有函数,或者子对象继承&#34;来自(新)父对象。虽然这解决了我遇到的问题,但总是为每个子类型对象反复重新创建相同的函数似乎是一个坏主意。

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

<p>

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

这样的东西?

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

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

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

2 个答案:

答案 0 :(得分:2)

最简单的方法是使用构造函数,因此数组总是在实例上创建为自己的属性

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

现在有

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

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

答案 1 :(得分:1)

OLOO赞成合成而不是继承。您可以使用带有Object.assign的工厂方法模式来组合具有简单原型委派的对象:

&#13;
&#13;
// Composable prototype objects, or "traits"
var base = {
  add: function(element) {
    this.array.push(element + this.array.length.toString());
    return this;
  },

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

var canRemoveAllButOne = {
  removeAllButOne: function() {
    this.array.splice(1);
    return this;
  }
}

// Factory functions
// You could think of these like external constructors
function createBase() {
  return Object.assign({}, base, {
    array: []
  })
}

function createComposed() {
  var base = createBase();
  return Object.assign(base, canRemoveAllButOne)
}

// Test
function log(s) {
  document.write(s + "<br>");
}

var b1 = createBase();
var b2 = createBase();
var c1 = createComposed();
var c2 = createComposed();

b1.add(1);
b1.add(2);
b2.add(9);

c1.add('a');
c2.add('b');

log(b1.getAll());
log(b2.getAll());
log(c1.getAll());
log(c2.getAll());
&#13;
&#13;
&#13;