矢印関数の使用方法について説明します.

🤔 矢印関数とは?

これは、functionキーワードではなく矢印(=>)を使用して関数を定義する方法が、従来の関数定義よりも簡単であることを意味します.

const multiply = (x,y) => x*y;
multiply(2,3);

宣言パラメータ

複数のパラメータがある場合は、カッコ()でパラメータを宣言します.

const arrow = (x,y) => {...};

パラメータが1つしかない場合は、カッコ()を省略できます.

const arrow = x => {...};

パラメータがない場合は、カッコ()は省略できません.

const arrow = () => {...};

関数本体の定義

✨ concise body
関数体が文で構成されている場合は、関数体を囲む括弧{}を省略できます.関数体の内部文が式の場合は、デフォルトで返されます.

const power = x => x ** 2;
power(2);

✨ block body

const power = x => { return x ** 2; };

⚠▼対象文字を返す場合は、対象文字を括弧()で包む必要があります.

const create = (id, content) => ({ id, content });
create(1, 'JavaScript');

// 위 표현은 다음과 동일하다.
const create = (id, content) => { return { id, content }; };

関数体が複数の文で構成されている場合、関数体を囲む括弧は省略できません.

const sum = (a, b) => {
	const result = a + b;
    return result;
};

▼▼矢印関数VS一般関数

1朕矢印関数はインスタンスを生成できないnon-constructorである.したがって、prototype propertyがなくてもprototypeは生成されません.
2πは重複するパラメータ名を宣言できない.
3朕矢印関数は関数そのもののthis,arguments,super,newである.targetバインドはありません.
3番をもう一度説明します.

This

まず、これが何なのかを知る必要があります.
これは、所属するオブジェクトまたは作成するインスタンスを指す自己参照変数です.これにより、オブジェクトまたは作成するインスタンスに属するプロシージャまたはメソッドを参照できます.
理解できないかもしれません.

まず、コンストラクション関数を呼び出すプロセスを見て、new演算子を使用して生成サブ関数を定義します。

function Circle(radius){
  ????.radius = radius;
}
Circle.prototype.getDiameter = function () {
  return 2 * ????.radius;
};

const circle = new Circle(5);

コンストラクション関数にPropertyまたはメソッドを追加するには、自分で作成したインスタンスを参照できる必要があります.
ただし、コンストラクション関数を使用してインスタンスを作成するには、まずコンストラクション関数が存在する必要があります.
すなわち、コンストラクション関数を定義する際にインスタンスが作成されていないため、インスタンスを指す識別子を認識できません.
したがって、作成するインスタンスを指す特殊な識別子はthisです.

次に、ツールでこの方法を使用する方法を見てみましょう。

const circle = {
  radius: 5,
  getDiameter(){
    //this는 메서드를 호출한 객체를 가리킨다.
    return 2 * this.radius;
  }
};

このことから,このバインドは関数呼び出し方式によって動的に決定されることが分かる.
通常の関数として呼び出されるすべての関数の内部のthisは、グローバルオブジェクトを指します.
次に、this定義を終了し、矢印関数のthisと通常の関数のthisの動作がどのように異なるかを理解します.
一般的な関数として呼び出されるコールバック関数の内部にあるこの問題

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }
  
  add (arr) {
    return arr.map(function (item) {
      return this.prefix + item;
    });
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

このコードは[-wevkit-transition]、「-webkit-user-select」を返すと予想されますが、タイプエラーが発生します.これは通常の関数として呼び出されるArrayのためである.prototype.mapメソッドのコールバック関数のthisは未定義に与えられる.したがって、コールバック関数のthisと外部関数のthisは異なる値を指すため、タイプエラーが発生します.
¥¥¥¥¥¥¥

class Prefixer{
  constructor(prefix) {
    this.prefix = prefix;
  }
  add(arr{
       return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

矢印関数には、関数自体のthisバインドはありません.したがって、矢印関数の内部でこの値を参照すると、親ミラーの値が直接参照されます.これをthisと言います.