レッスンに戻る

「this」の値を説明する

重要度: 3

以下のコードでは、obj.go()メソッドを連続して4回呼び出すことを意図しています。

しかし、(1)(2)の呼び出しは(3)(4)とは異なる動作をします。なぜでしょうか?

let obj, method;

obj = {
  go: function() { alert(this); }
};

obj.go();               // (1) [object Object]

(obj.go)();             // (2) [object Object]

(method = obj.go)();    // (3) undefined

(obj.go || obj.stop)(); // (4) undefined

以下に説明します。

  1. これは通常のオブジェクトメソッド呼び出しです。

  2. 同じように、ここでの括弧は演算の順番を変えません。いずれにしてもドットが最初です。

  3. ここではより複雑な呼び出し(expression)()があります。呼び出しは、2つの行に分割されているかのように機能します。

    f = obj.go; // calculate the expression
    f();        // call what we have

    ここでは、f()thisを持たない関数として実行されます。

  4. (3)と同様に、括弧()の左側に式があります。

(3)(4)の動作を説明するには、プロパティアクセサ(ドットまたは角括弧)が参照タイプの値を返すことを思い出す必要があります。

メソッド呼び出し(=||などの代入)を除くそれに対して行われた操作は、thisを設定することを可能にする情報を保持しない通常値に変換されます。