0

オブジェクトの新しいインスタンスの作成に問題があります。

以下のコードを使用して、各要素が独自のランダムな値を持つことを期待していました（これは起こっています）。

しかし、オブジェクトの各インスタンスに値が含まれることも期待していましたthis.elementが、代わりに、オブジェクトのいずれかのインスタンスで値が変更されるたびに、すべてのインスタンスで値が更新されます。

var Instance = function(element) {
    this.$element = $(element);
    this.subInstance.parent = this;
}

Instance.prototype = {

    subInstance: {

        parent: null,
        $element: null,

        init: function() {
            var $this = this;
            this.$element = this.parent.$element;

            //test for what this.$element refers to in init function
            var random = Math.random();
            $('.element', this.$element).text('Updated ' + random);

            //test for what this.$element refers to in an event handler
            $('.element', this.$element).on('click', function(e) {
                $this.$element.css('background-color', '#f00');
            });
        }
    }
}
$('div.instance').each(function(i, o) {
    var instance = new Instance(o);
    instance.subInstance.init();
});​

これで、を使用してsubInstanceをプロトタイプからコンストラクターに移動できることがわかりましたthis.subInstance = {...が、それは間違っているようthis.$elementです。オブジェクトの各インスタンスに含まれていないのはなぜですか。

両方の例のJSFiddle：http: //jsfiddle.net/q7zAg/

4

3 に答える 3

1

間違っているように見えるかもしれませんが、そうではありません。コンストラクターから作成された各オブジェクトが一意subInstanceで動作する必要がある場合は、個々のインスタンスごとに新しいオブジェクトを作成する必要があります。そのprototype上で共有されます。

ただし、実行できることの1つはObject.create、プロトタイプを継承する新しいインスタンスを作成するために使用することsubInstanceです。次に、再利用のメリットが得られ、各インスタンスは独自のオブジェクトを変更できます。

var Instance = function(element) {
    this.$element = $(element);
    this.subInstance = Object.create(this.subInstance);
    this.subInstance.parent = this;
}

subInstanceここで、まだはにあるべきではprototypeなく、IIFEのローカル変数である必要があると主張する人もいるかもしれません。私はこれに同意する傾向があります。

次に例を示します。

var Instance = (function() {
    var _subInstance = {
        parent: null,
        $element: null,
        init: function() {
            // ...
        }
    };

    var Instance = function(element) {
        this.$element = $(element);
        this.subInstance = Object.create(_subInstance);
        this.subInstance.parent = this;
    };

       // other prototyped props
    Instance.prototype.foo = "bar";

    return Instance;
})();
于 2012-11-04T22:37:57.300 に答える
0 
var Obj = 
{
    internal:null,

    __init:function(data){
        this.internal = data;
        return this
    },
    get:function(){
        return this.internal;
    },
    init:function(){
        var args = arguments,instance = function(){
             return this.__init.apply(this,args);
        };
        instance.prototype = this;
        return new instance();
    }
}

console.log(Obj.init(123).get());
console.log(Obj.get());
console.log(Obj.init(321).get());
console.log(Obj.get());
于 2013-02-06T07:30:03.843 に答える
0

this関数の設定は、関数の宣言方法や初期化方法ではなく、関数の呼び出し方法によって設定されることに注意してください（ bindを使用する場合を除く）。

あなたのコードには次のものがあります：

> Instance.prototype = {
>     subInstance: {

これは、オブジェクトであるプロパティをInstance.prototype持つオブジェクトをに割り当てます。subInstance

次にあります：

>         init: function() {
>             var $this = this;
>             this.$element = this.parent.$element;

このメソッドは次のように呼び出されます。

> instance.subInstance.init();

したがってthis、メソッド内ではinit常に同じオブジェクト（つまり）を参照するため、値を置き換え続けるInstance.prototype.subInstanceための割り当てが行われます。this.$element

于 2012-11-04T23:29:06.100 に答える