矢印関数&一般関数this VS矢印関数this

👩‍💻 本稿では,矢印関数,通常関数this,矢印関数thisの違いをまとめた.

矢印関数

ES 6に追加.以下の例のように使用できます.

const pow = x => x * x;
console.log(pow(10)); // 100

const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

いつ使いますか。

名前の付いていない匿名関数は、すぐに実行する必要がある場合に使用します.

なぜ使いますか。

コードの簡潔性
既存の

関数式と比較して、

は非常に簡単です.

本文が短い場合は、再試行と括弧

を省略できます.

コールバック関数この参照値の場合(この値で語彙scopeを参照)

mapを使用すると、コードをより簡単に記述できます.//困難猶予

欠点?

オブジェクトのプロトタイプ宣言メソッドには適用されません.

型のpropertyがないため、構造関数を使用するのは難しい.(汎用関数はコンストラクション関数として使用可能)

パラメータ変数が渡されません.通常の関数では、関数の実行時にパラメータ変数が暗黙的に渡され、使用できます.

一般関数thisと矢印関数thisの違い

入る前にthisとbindingを知っておきます.

this?

thisは表示中のオブジェクトを表し、状況によってthisのオブジェクトが異なります.
関数を呼び出すときに呼び出すかどうかを決定します.

const hello = {
  hi: function () {
    console.log(this)
  },
}
hello.hi()// this => hi 출력

バインドは何ですか?

これは、

関数呼び出しを実際の関数に関連付ける方法です.

静的バインディング(静的バインディング)と動的バインディング(動的バインディング)に分けられる.

動的－実行時に完了または実行時に変更します.
静的-実行時間の前に起きます.運転時間は変わらない.

一般関数

通常の関数は、実行するたびに

という名前のオブジェクトを関数に追加します.

関数呼び出し方式は、このオブジェクトにバインドする動的決定を行う.

function fun() {
	this.name = "하이";
    return {
    	name: "바이",
        speak: function () {
        	console.log(this.name);
        },
    };
}

const fun1 = new fun();
fun1.speak(); // 바이

矢印関数のthis

関数が宣言されると、この関数にバインドするオブジェクトが静的に決定されます.

thisのターゲットは、どのオブジェクトが呼び出されたのか分かりません.関数の内部にthisがないからです!

はいつも大尉のこの点(外部)を指している.これをLexicalisといいます.

function arrFun() {
	this.name = "하이";
    return {
    	name: "바이",
        speak: () => {
        	console.log(this.name);
        },
    };
}

const arrfun1 = new arrFun();
arrfun1.speak(); // 하이

整理する
矢印関数を使用する理由いつですか.使いますか.
矢印関数は、ES 6に新しく追加された構文、匿名関数であり、直ちに関数を実行する必要がある場合に適しています.既存の関数式に比べて簡単で使いやすいという利点があり、この値を使用して文法scopeを参照したりmapを使用したりすると、スキップしてコードの作成を容易にすることができます.
一般関数this vs矢印関数this?
一般関数はthisを動的にバインドし、依存するオブジェクトをthisに指します.矢印関数では、thisは親scopeのthisを指し、Lexicalthisと呼ばれます.矢印関数は構造関数として使用しにくく、パラメータ変数は伝達されません.オブジェクトプロトタイプ宣言メソッドを使用する場合、矢印関数は適用されません.