javascript - javascript配列から関数を呼び出す

Question

私はこのコードを持っています：

var foo = {
    x: 2,
    bar: function() {
        alert(this.x);
    }
};

foo.bar()アラート2中に[foo.bar][0]()アラートを送信するのはなぜundefinedですか？

Answer 1

したがって、技術的[foo.bar][0]にはと同等ですがfoo.bar、関数を呼び出す時点でオブジェクトbarとの「字句バインディング」が失われているため、関数fooを呼び出すと、JavaScriptは実際に次のように実行します。

foo.bar.call([foo.bar]);

一般的に、この式は次のとおりです。

XXX.yyy(args)

次のように解釈されます：

XXX.yyy.call(XXX, args);

この場合XXXは[foo.bar]であり、.yyyです[0]。

fooこれを修正するには、明示的に再度バインドする必要があります。

[foo.bar][0].call(foo);

Answer 2

を実行する[foo.bar][0]()とthis、baris[foo.bar]では配列になりますが、オブジェクトにはなりませんfoo。

メソッド名が番号であることを想像するだけ0です（ただし、構文は間違っています）。

([foo.bar]).0(); // you see, `this` became the array object: [foo.bar]

そして[foo.bar].xですundefined。

Answer 3

これは、配列オブジェクトで関数を呼び出しているためです。「this」キーワードは配列と同じです。

[foo.bar][0](); 

javascriptでは、関数が呼び出されるコンテキストはさまざまです。「this」キーワードは、呼び出された方法に基づいて異なる値を持つことができます。関数がオブジェクト（配列を含む）で呼び出された場合、言語は「this」をそれが呼び出されたオブジェクトと等しくします。一方、別のオブジェクトの関数を別の変数に保存して呼び出すことができます。あなたがこれでしたように：

var test=[foo.bar][0];
test();`//here is alert "2" 

コンテキストはウィンドウになります。

呼び出しを調べて、javascriptのメソッドを適用します。これにより、「this」キーワードの柔軟性に目を向けることができます。これは、他の言語を使用する多くのプログラマーの間で多くの混乱を招く場所ですが、この原則が理解されると、そこから多くの力が生まれます。たとえば、JQueryは「call」と「apply」を使用して、イベントが発生した要素のコンテキストでイベントのコールバックを呼び出します。

Answer 4

これは、配列を作成[foo.bar]するときにメインオブジェクト（foo）から配列を分離し、関数でアラートthis.xを出し、新しく作成されたオブジェクト[foo.bar]thisが未定義であるためです。