javascript - Javascriptの「this」の値

Question

誰かが、以下の「これ」がウィンドウではなくDOMオブジェクトを指している理由を説明できますか？

$("a").click(function() {
    console.log(this);
});

これにより、次のようになります。

<a id="first" href="http://jquery.com">

同じシナリオであるはずの次のことを考慮してください。

function Foo() {
    this.click = function(f) {
        f();
    }
}

var obj = new Foo();
obj.click(function() {
    console.log(this);
});

ここで取得するのは、Windowオブジェクト（私が期待していたもの）です。

score 6 · Accepted Answer

Javascriptでは、OOPはJavaなどの言語で慣れているものとは異なります。

基本的に、OOPはなく、それthisは関数の単なる「隠された引数」であると考える方が簡単です。

たとえば、あなたが見るとき

function f(x, y, z) {
    console.log(this, x, y, z);
}

一般的なOOP言語（Javaなど）では、

function f(this, x, y, z) {
    console.log(this, x, y, z);
}

あなたが見るときvar a = b.f(x, y, z);、考えてくださいvar a = f(b, x, y, z)。

var a = f(x, y, z);thinkが表示された場合var a = f(undefined, x, y, z);（ブラウザ環境では、strictモードが有効になっていない場合は有効になりますf(window, x, y, z);）

thisこれで、例でネストされたスコープで異なることを意味する理由を理解しやすくなります。

score 5 · Accepted Answer

関数が実行されるコンテキスト次第です。jQueryはコールバック関数のコンテキストを明示的に変更しますが、関数はグローバルコンテキストで関数を実行します。

コンテキストを変更するには：

function Foo() {
    this.click = function(f) {
        f.apply(this);
    }
}

また

function Foo() {
    this.click = function(f) {
        this.f = f
        this.f();
    }
}

さらに読むために：

score 4 · Accepted Answer

thisコンテキストによって決定されます。

コードを以下に変更すると、はthisを指しsome_other_objectます。

function Foo() {
    this.click = function(f) {
        f.call(some_other_object);
    }
}

score 2 · Accepted Answer

jQueryは、イベントハンドラーを呼び出すときにjavascriptapply関数を使用します。mdnドキュメントから：

指定されたこの値と配列として提供された引数を使用して関数を呼び出します。

4 に答える 4