アロー関数のthis

（関数）
https://webstyle.work/jjsarrowfunction/

アロー関数のthisの特徴は「thisを束縛しない」ということである。すなわち「参照するthisを固定できる」もしくは「最初に定義した関数名を参照する」と言い換えることができる。

let obj ={
  name:'shino',
  age:31,
  hobby:'trip',
  print:function(){
        console.log(this.name); // ①
        let obj2 ={
          do:function(){
            console.log(this.hobby); // ②
        }
    }
    obj2.do();
  }
}
obj.print();

この場合①と②のそれぞれのthisが何を参照するかというと、結果は以下のようになる。

shino
undefined

一つ目のthisは「shino」という値を出力したが、二つ目のthisは「undefined＝定義されていません」と出力されてしまう。

undefinedになる理由

そもそもthisは「呼び出される場所で参照する対象が変わる変数」である。簡潔に言うと「thisは原則、コードを上に遡って一番最初に見つけたオブジェクトを参照する」のである。

コードを遡って一番最初に見つけるオブジェクトは let = obj {} となる。つまり、上記のコードでは、this = objとなっているため、console.log(obj.name); となり、結果は ‘shino’ になる。objのnameプロパティはshinoだからである。

そして二つ目のthisが最初に見つけるオブジェクトは、obj2というオブジェクトである。2つめのthisがコードを遡って最初に見つける関数名はobj2だからである。この場合、obj2には、「hobby」というメソッドは存在しない。そのため、「obj2っていうオブジェクトではhobbyっていうメソッドは定義されてないよ。だからundefinedでプログラマーさんに向けて表示するね」という事がブラウザの中で起こっている。

obj2をアロー関数に変えてみる

let obj ={
  name:'shino',
  age:31,
  hobby:'trip',
  print:function(){
        console.log(this.name);
        let obj2 ={
          do:()=>{
            console.log(this.hobby);
        }
    }
    obj2.do();
  }
}
obj.print();

このように記述すると結果は以下のようになる。

shino
trip

ちゃんとobjのオブジェクト名を取得する事ができ、

let obj2 = {
  do:function(){
    console.log(this.hobby);

この部分が

let obj2 = {
  do:()=>{
    console.log(obj.hobby);

となったため、値を取得する事ができる。
このようにアロー関数を使う事で、呼び出す関数を一番最初の関数に固定する事ができる。

inserted by FC2 system