【JavaScript】this と アロー関数メモ

Javascriptにおける、thisのメモ

サマリ的な

• （アロー関数をのぞき）関数の中で使用されているthisはその関数を呼び出している呼び出し元のオブジェクトをさす。
• 関数の中に書かれたthisは、関数の呼び出し元から暗黙的（コードへの記述なし）に渡されている。暗黙的に渡されているthisは呼び出し元のオブジェクトそのものである。
• アロー関数はthisを呼び出し元のオブジェクトから受け取らない。アロー関数は定義された場所（記述された場所）から一つ外側の関数のthisを受け取る。

コードによる具体例

Agent・・・代理人、doWorkメソッドを持つ。doWorkメソッドは与えられた関数を実行するだけ。
Person・・・私、極度の面倒くさがりのためAgent君を呼びつけ関数を渡して実行してもらおうとする。
 

下記コードは動かない例

"use strict";

const Agent = {
 doWork(callback){
  callback(); //渡した無名関数はここで実行されている。
 }
}

const Person = {
  name: "hiraku",
  requestWork(agent){
    agent.doWork(function(){
      console.log(this.name);
    })
  },
}

//  PersonがAgentに渡した無名関数はAgentのdoWorkメソッド内で実行される。
// そのためthis.nameはPersonオブジェクトのnameではない。
// これはエラーになる。
Person.requestWork(Agent);

解決方法の一つとしてアロー関数を使用するというのがある。

修正後コード

"use strict";

const Agent = {
 doWork(callback){
  callback();
 }
}

const Person = {
  name: "hiraku",
  requestWork(agent){
    agent.doWork(() => {
      console.log(this.name);
    })
  },
}

// エラーにならず「hiraku」が表示される！
Person.requestWork(Agent);

まとめ（サマリと同じ）

• （アロー関数をのぞき）関数の中で使用されているthisはその関数を呼び出している呼び出し元のオブジェクトをさす。
• 関数の中に書かれたthisは、関数の呼び出し元から暗黙的（コードへの記述なし）に渡されている。暗黙的に渡されているthisは呼び出し元のオブジェクトそのものである。
• アロー関数はthisを呼び出し元のオブジェクトから受け取らない。アロー関数は定義された場所（記述された場所）から一つ外側の関数のthisを受け取る。