Posted at

【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の基礎についてアウトプットしていますが、まだまだ知らないことが多すぎる。。。

がんばるじょ!