矢印関数

矢印関数(Arrow function)は、functionキーワードの代わりに矢印(=>)を使用して、関数をより簡単に宣言できます.

// 일반 함수
var foo = function () { console.log("foo") }; // foo

// 화살표 함수
var bar = () => console.log("bar"); // bar

functionキーワード生成の一般関数と矢印関数の最大の違いはthisである.

矢印関数のthisが違う?!どうして違うの?

一般的な関数は、関数を宣言するときに、バインドされたオブジェクトが静的に決定されるのではなく、関数を呼び出すときに関数をどのように呼び出すかに基づいて、バインドするオブジェクトを動的に決定することを示します.
関数を宣言すると、矢印関数は、この関数にバインドするオブジェクトを静的に決定します.動的に決定される通常の関数とは異なり、 矢印関数のthisは常に親scopeのthisを指します. これは. Lexicalthisと申します
矢印関数はLexicalthisをサポートし、コールバック関数として使用しやすい.しかし、矢印関数を使用すると、かえって混乱することに注意してください.

注意矢印関数の使用

1.方法

// Bad
const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined

メソッド定義の矢印関数で、thisはメソッドを持つオブジェクト、すなわちメソッドを呼び出すオブジェクトではなく、親としての「グローバルオブジェクト」ウィンドウを指します.したがって、矢印関数を使用してメソッドを定義することは推奨されません.

// Good
const person = {
  name: 'Lee',
  sayHi() { // === sayHi: function() {
    console.log(`Hi ${this.name}`);
  }
};

person.sayHi(); // Hi Lee

2. prototype

// Bad
const person = {
  name: 'Lee',
};

Object.prototype.sayHi = () => console.log(`Hi ${this.name}`);

person.sayHi(); // Hi undefined

矢印関数を使用してオブジェクトを定義する方法では、同じ問題が発生します.

// Good
const person = {
  name: 'Lee',
};

Object.prototype.sayHi = function() {
  console.log(`Hi ${this.name}`);
};

person.sayHi(); // Hi Lee

3.コンストラクタ

矢印関数はコンストラクション関数として使用できません.コンストラクション関数にはprototype propertyがあり、prototype propertyが指すprototypeオブジェクトのコンストラクション関数を使用します.しかし、矢印関数にはプロトタイププログラムはありません.

const Foo = () => {};

// 화살표 함수는 prototype 프로퍼티가 없다
console.log(Foo.hasOwnProperty('prototype')); // false

const foo = new Foo(); // TypeError: Foo is not a constructor

4.addEventListener関数のコールバック関数

addEventListener関数のコールバック関数を矢印関数として定義すると、親のコンテキストであるグローバルオブジェクトウィンドウを指します.

// Bad
var button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

この関数をaddEventListener関数のコールバック関数で使用する場合は、関数キーで定義された一般的な関数を使用する必要があります.通常の関数で定義されるaddEventListener関数のコールバック関数では、thisはイベントリスナーにバインドされた要素(currentTarget)を指します.

// Good
var button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});