Modern Javascipt(矢印関数)

関数の3つの表現方法

関数宣言function func1() {}

関数式const func2 = function() {};

矢印関数const func3 = () => {};

関数宣言文と関数式は、前のコアJavaScript書でまとめられているので、화살표함수について説明します.

矢印関数の特徴

1.矢印関数は常に匿名です.
矢印関数は常に匿名であるため、再使用するために함수 표현식で記述する必要があります.
ただし、繰り返し使用しなければ함수 선언문を使用することも可能である.
そこで、2つの異なる使い方を見てみましょう.
1.矢印関数の再使用var/let/const 함수명 = (매개변수) => {실행문}

// 기본형
const func1 = (a, b) => { return console.log(a,b) };

// 매개변수가 1개인 경우 () 생략가능
const func2 = a => { return console.log(a) };

// 1개의 실행문만 갖는 경우 {} 생략가능
const func3 = (a, b) => console.log(a,b);

この場合、矢印関数は関数名でロードおよび再使用できます.
2.矢印関数を無効にする
デフォルトでは、矢印関数は함수 선언문を単独で使用できません.

function (a,b) => { return console.log(a,b); };  // Uncaught SyntaxError: Function statements require a function name

これは、エラーメッセージに示すようにfunction nameが必要であるためです.
ただし、繰り返し使用する必要のないコールバック関数に使用すると便利です.

const array = ['a', 'b', 'c'];

array.forEach((value) => console.log(value + value)); // aa bb cc

矢印関数を使用しない場合は、関数宣言として作成されます.

const array = ['a', 'b', 'c'];

array.forEach(function (value) {
  console.log(value + value);
}); // aa bb cc

これにより、コードの可読性が低下します.(これは簡単な例で、違いはありませんが、長いコードではもっと複雑になります.)
3.矢印関数は使用できません

オブジェクトを定義する方法(使用可能ですが推奨されません)화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다.(詳細は下記)

プロトタイプの割当て方法:화살표 함수는 prototype 속성이 없습니다.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

をコンストラクション関数として使用화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

==> 矢印関数を使用するときによくあるエラーをまとめたブログです。

矢印関数のthis

一般的な関数またはメソッドは、呼び出し時に生成された実行コンテキストにおいてthis binding情報を生成します.
ただし、矢印関数を呼び出すとthis bindingは実行されません.簡単に言えば、私たちは誰が自分を呼んでいるのか分かりません.
したがって、矢印関数が参照するthisBinding情報は、自身が呼び出した時点を考慮せずに矢印関数を宣言する実行コンテキストによって参照される.
つまり、それはいつも親鏡thisを指しています.
例を見てみましょう.

// 일반 함수로 작성한 메서드
var name = 'yun';
var info = {
    name : 'kim',
    getName : function(){
        console.log(this.name);
    },
};
info.getName();     // 'kim'
// .을 기준으로 getName의 상위 스코프인 info를 this로 바인딩하여 'kim'이 출력된다.

var name2 = 'yun';
var info2 = {
    name2 : 'kim',
    getName: () => console.log(this.name),
};
info2.getName();     // 'yun'
// this가 정적으로 바인딩되어 info의 상위 스코프인 window를 가리키고 'yun'이 출력된다.

2番目に矢印関数をメソッドとして使用する例は、矢印関数が宣言された実行コンテキスト=>info 2の実行コンテキストthisを指します.
したがって、info 2の親スキャンウィンドウを指します.name「yun」が呼び出されます.