jquery - jQuery-jQuery関数から変数にアクセスします

Question

彼ら。私はこのようなものを持っています：

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(){
            alert(this.str);
        });
    }
}

myThing.setClick();

問題は、ボタンをクリックすると、関数がstrが何であるかを認識しないことです。alert(str)エラー（str is not defined）が表示され、アラートは表示されません。alert(this.str)アラートが表示されますが、が含まれていundefinedます。

ボタンを参照してthisいて、ボタンに。という属性がないことがわかりますstr。では、jQueryの関数の外にあるstrにアクセスするにはどうすればよいですか？

Answer 1

イベント ハンドラーの外側のthisinへの参照を保存します。setClickclick

myThing = {
    str:"my string",
    setClick: function() {
        var self = this;
        $("button").click(function() {
            alert(self.str);
        });
    }
}

デモ。

Answer 2

オブジェクトはいつでも名前で参照できます

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(){
            alert(myThing.str);
        });
    }
}

myThing.setClick();

Answer 3

JavaScript 関数を使用して、関数のコンテキストを強制できますbind。などの場面で活躍できると思います。thisバインドされている関数内の値を定義できます。

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(e){
            // 'this' is myThing
            // $(e.currentTarget) is the button on which the event handler was attached
        }.bind(this));
    }
}

myThing.setClick();