【ES6 JavaScript】アロー関数とthisについて初心者エンジニアがまとめてみた

ES6とは

ES2015というJavaScriptのバージョンのことです。
現在のモダン開発の殆どは、このバージョンに倣っています。

詳細の概要はこちらでご確認ください。

thisについて

以下のコードではthisの使い方について説明します。

例1

value = 'global value';

function printValue(){
  console.log(this.value); //上記のvalueキーの値を指している
}

let obj = {
  value: 'obj value',
  func: printValue
} //新たにobjオブジェクトを作成し、valueに'obj value'を格納

let obj2 = {
  value: 'obj2 value',
  func: printValue
}//obj2を作成し、valueに'obj2 value'を格納

obj.func();
obj2.func();

/* 
"obj value"
"obj2 value"
*/

例1デモ
printValue関数にconsole.log()をするように記述します。
ここで言う、this.valueは直前で変数定義したvalueを指します。
**console.log(this.param);**をオブジェクト定義後に単体で記述するとvalueの値('global value')が直接出力されます。

objとojb2オブジェクトでの定義は、各キー(valueとkey)に値を代入しています。
それぞれのオブジェクトを呼び出すには、**obj.func();**のように「valueキー.funcキー()」になります。
オブジェクトを呼び出すと、初めに定義したfunctionが呼ばれるため、console.log()されます。
その時の処理結果は、objとojb2オブジェクトで代入された値となります。

アロー関数(ES6以降)のthis

例2と似たようなコードにはなりますが、printValue関数を定義する際にアロー関数となっています。
変更点はfunctionがアロー関数に変更されただけになりますが、処理結果はそれぞれ一番始めに定義した、valueオブジェクトの値になります。

例2

value = 'global value';

let printValue = () => { //アロー関数
  console.log(this.value); //上記の変数valueの値を指している
}

let obj = {
  value: 'obj value',
  func: printValue
} //新たにobjオブジェクトを作成し、valueに'obj value'を格納

let obj2 = {
  value: 'obj2 value',
  func: printValue
}//obj2を作成し、valueに'obj2 value'を格納

obj.func();
obj2.func();

/* 
"global value"
"global value"
*/

例2デモ

MDNのカンファレンスの記載では、

アロー関数式 は、その名のとおり矢印を使って記述し、function 式より短い構文で同様な内容を記述することができます。なおthis, arguments, super, new.target を束縛しません。

とありますが、実行した結果から判断すると

例1のfunction・・・valueは再代入可能なためfunctionで定義される関数はthisを束縛しない
例2のvalue・・・valueは再代入が不可能なためアロー関数で定義される関数はthisを束縛する

ということになります。
最近のJavaScriptではES6が多く使われているので、thisを使う際はこの違いを把握する必要があります。

感想

ここ最近、【転職して痛感…】でもJavaScriptの基礎についてアウトプットしていますが、まだまだ知らないことが多すぎる。。。
がんばるじょ！