Javascriptのオブジェクト

Question

内でこのキーワード私は、このオブジェクト持っている：私は予想通り、私はeventDisplay.attachCheckboxHandler()を呼び出すとき

var eventDisplay = { 
    eventTable: $('.table-event > table'), 
    archiveButton: $('table-event__archive-button'), 
    deleteButton: $('table-event__delete-button'), 
    checkedCheckboxes: $('.table-event input[type=checkbox]'), 
    countChecked: function() { 
    return this.checkboxes.filter(':checked').length; 
    }, 
    selectionChanged: function() { 
    if (this.countChecked() > 0) { 
     deleteButton.removeClass("disabled"); 
     archiveButton.removeClass("disabled"); 
    } else { 
     deleteButton.addClass("disabled"); 
     archiveButton.addClass("disabled"); 
    } 
    }, 
    attachCheckboxHandler: function() { 
    this.checkboxes.on('click', this.selectionChanged); 
    } 
} 

を、attachCheckboxHandlerでthisは、オブジェクトに参照のうえれます。しかし、selectionChangedと呼ばれるので、代わりにthisがチェックボックスを参照します。しかし、thisは、eventDisplayを参照するようにselectionChanged内に入力します。それは可能ですか？もしそうなら、どうですか？

Answer 1

これは、イベント関数内のthisキーワードが、関数の呼び出し元に関連しているため、必ずしも全体インスタンス（発見したもの）とは関係がないためです。

は、例えば、イベントには、次のようにトリガーされる可能性があります。

// checkbox has been selected 
checkbox.selectionChanged.call(); 

それでは、あなたのコールバックで、thisは、チェックボックスのインスタンスになります。

もし変数にメインオブジェクトを割り当てているので、あなたは自分のコールバックにその参照することができなければならない：

var eventDisplay = { 
    selectionChanged: function() { 
    if (eventDisplay.countChecked() > 0) { <-- note here 
     deleteButton.removeClass("disabled"); 
     archiveButton.removeClass("disabled"); 
    } else { 
     deleteButton.addClass("disabled"); 
     archiveButton.addClass("disabled"); 
    } 
    } 
} 

Answer 2

コンテキスト（this）は、非常に特定の状況下で変更されます。通常は、ドット表記を使用してメソッド（オブジェクトプロパティとして設定された関数）を呼び出すときに発生します。たとえば、foo.bar()はthisからfooに設定されます。

ドット表記法を使用して関数を呼び出さない場合は、通常、コンテキストを変更しません。たとえば、baz = foo.bar; baz()は上記と同じですが、this〜fooに設定されません（変更されません）。

コードではまったく同じことが起こっていますが、ローカル変数代入の代わりにパラメータを渡します。function quux(baz) { baz(); }; quux(foo.bar)はfoo.barをbazに割り当てます。

新しいコンテキストを関数にバインドすることができます：baz = foo.bar.bind(foo); baz()は、bazが呼び出されるたびにコンテキストをfooに設定します。あるいは、bazをfoo.bar()を適切に呼び出すラッパー関数にバインドすることができます（baz = function() { foo.bar(); }; baz();）。これはあなたの例に変換する方法

：

this.checkboxes.on('click', this.selectionChanged.bind(this)); 

（メソッドの呼び出しや束縛関数呼び出しのほかに、コンテキストはまたとcallとapply機能で、new演算子を使用する場合に設定されている、日本酒完全性のために）

Answer 3

一般的なプラクティスは、関数としてオブジェクトを宣言し、そのメソッドに使用する別名（私はthizを使用）を作成することです。最後に、必要な関数だけをexpatする実際のオブジェクトを返します。今はすべて同じものを参照しています。

var myObj = function() { 
    var thiz = this; 
    var method1 = function (args) { 
     // use thiz here 
    } 
    // define more methods of you want, such as method2... 

    return { 
     method : method1, 
     anotherMethod : method2 
    }; 
}