JavaScriptの普通の関数とアロー関数について

JavaScriptの普通の関数とアロー関数についてよく分からないことがあったのでテストした結果です。

まずは普通に関数を作ってみる。

function test( msg )
{
	return alert( msg );
}

test( '関数のテスト' );

もちろんＯＫ。
次に関数を変数に入れて使う。

test2 = function( msg )
{
	return alert( msg );
}

test2( '関数のテスト2' );

PHPをやっていると関数を変数に入れる、というのは大変気持が悪いがJavaScriptはできてしまう。
もっと気持ち悪いのは関数内に関数を定義できてしまう。

test3 = function ( msg )
{
  test4 = function (msg)
  {
    alert(msg);
  }
	return test4( msg );
}

test3( '関数のテスト3' );

次にアロー関数による関数定義について。
アロー関数は「()=>{}」を使って関数を定義できるものでES2015から追加されたらしい。
アロー関数による関数定義はReactなんかで頻出するので慣れておく必要がある。

PHP使いにはアロー関数と言えば配列の定義なので気持ちが悪いことこの上ない。

function test( msg )
{
	alert( msg );
};

test( '関数のテスト' );

上記はアロー関数で書き換えるとこうなる。

test = ( msg ) =>
{
	alert( msg );
};

test( '関数のテスト' );

functionがなくなっているのが分かる。
アロー関数による関数定義とそうではない関数定義の違いは、「this」が指し示す値にあるらしい。
普通に「this」をconsole.log( this )で出力すると最上位オブジェクトの「window」を指し示す。
ふむふむ。

thisのとる値は文脈的で、どこで宣言されたかによって参照する値が異なると。
それが度々エラーに繋がるということで、アロー関数が登場したと。

アロー関数内では最初にthisが宣言された値に固定される。
通常関数内ではthisは呼び出されたオブジェクトの値をとる。

という違いがあるらしい。

以下のように試してみる。

this.test = 'オブジェクト外の変数';

//オブジェクトを定義する
const Obj = {

	test	: 'オブジェクト内のプロパティ',

	//普通の関数
	regular	: function() {
		return this.test;
	},

	//アロー関数
	arrow	: ()=> {
		return this.test;
	}

};

console.log( Obj.regular() );	//オブジェクト内のプロパティ
console.log( Obj.arrow() );		//オブジェクト外の変数

ふむ、確かに。

ちなみにアロー関数内で呼び出し元の「Obj」の「test」を呼び出す場合は「Obj.test」でいいらしい。

this.test = 'オブジェクト外の変数';

//オブジェクトを定義する
const Obj = {

	test	: 'オブジェクト内のプロパティ',

	//普通の関数
	regular	: function() {
		return this.test;
	},

	//アロー関数
	arrow	: ()=> {
		alert( Obj.test );
		return this.test;
	}

};

console.log( Obj.regular() );	//オブジェクト内のプロパティ
console.log( Obj.arrow() );		//オブジェクト外の変数

以上です。