jQuery onclick 'thisなし'

Question

// Block class 
function Block(id) { 
    this.element = $('<td>'); 
    $(this.element).click(function() { 
     console.log(this); 
    }); 
} 

コンソールログは、クリックされたHTML要素を出力しますが、これは私が望んでいないものです。代わりにこの要素に関連付けられたBlockオブジェクトにアクセスしたいと思います。これはどのように可能ですか？

Answer 1

.click（）メソッドに渡す関数が要素のコンテキストに存在するため、そのコンテキストでthisが要素を参照しています。変数に外側のコンテキストを保存することによって、あなたはあなたの新しいコンテキスト内でそれにアクセスすることができます。

function Block(id) { 
    var self = this; //capture "this" in outside context 

    this.element = $('<td>'); 
    $(this.element).click(function() { 
     console.log(self); 
    }); 
} 

Answer 2

あなたはクリックハンドラー外の変数にthisの値をキャプチャすることができます掲載のものはbindを使用することです。それは、余分なコンテキスト省の変数を必要としないよう

function Block(id) { 
    this.element = $('<td>'); 
    $(this.element).click(console.log.bind(this)); 
} 

このアプローチはいいです。

Answer 3

代替ソリューションへ：

// Block class 
function Block(id) { 
    var self = this; // here, this refers to Block() 
    this.element = $('<td>'); 
    $(this.element).click(function() { 
     console.log(this); // here this refers to element 
     console.log(self); // here self refers to Block() 
    }); 
} 

Answer 4

また、ES6で新たに定義された矢印機能を使用することもできます。

「矢印関数式は、関数 表現よりも短い構文を持っていると引数、スーパー、または new.target、この独自の結合しない。矢印機能は常に匿名である。これらの機能 式は最高です非メソッド関数には適しており、 はコンストラクタとして使用できません。すべてのブラウザがこの機能を実装していない

function Block(id) { 
    this.element = $('<td>'); 
    $(this.element).click(() => { 
     console.log(this); // now this will be what it was outside of the anonymous function passed into .click 
    }); 
} 

注意。私はそれがクロームではなくIE（もちろん）で動作すると信じています。だから、この機能を使いたいのであれば、JavaScriptコードを特定のブラウザのバージョンと互換性があるように変換する、javascriptトランスペアラ（私はBabelをお勧めします）を使用することをお勧めします。したがって、上記の機能にバベルを使用した後にJavascriptをあなたはもちろん、常にちょうど上記のようなあなたの関数を記述し、バベルを使用する必要はありませんでした。この

function Block(id) { 
    var objectReference = this; 
    this.element = $('<td>'); 
    $(this.element).click(function() { 
     console.log(objectReference); 
    }); 
} 

ようになります。ブラウザの互換性を確保したい場合や、ES6の機能をさらに使用する予定がある場合は、Babelはそれだけの価値があります。