JavaScript アロー関数の使用法の概要

この記事ではアロー機能のメリットを紹介します。

より簡潔な構文

まず、通常の構文に従って関数を定義しましょう:

function funcName(params) {
return params + 2;
}
funcName(2);
// 4

この関数はアロー関数を使用しており、たった 1 行のコードで実行できます。
りーカッコイイじゃないですか！これは非常に簡潔な例ですが、コードを記述する際のアロー関数の利点をよく示しています。アロー関数の構文を詳しく見てみましょう:
[code ](parameters) => { states }[/code] パラメータがない場合は、さらに簡略化できます:

var funcName = (params) => params + 2
funcName(2);
// 4

パラメーターが 1 つだけの場合、括弧は省略できます:

() => { statements }

戻り値が 1 つの式 (式) のみの場合は、中括弧も省略できます:

parameters => { statements }

アロー関数の構文を学習したところで、次は次のとおりです。それを練習してください。 Chrome ブラウザの開発者コンソールを開いて、次のように入力します:

parameters => expression
 
// 等价于:
function (parameters){
return expression;
}

変数 double をアロー関数にバインドします。この関数はパラメータ num を持ち、num * 2 を返します。 この関数を呼び出します:

var double = num => num * 2

ローカル this のバインドなし
通常の関数とは異なり、アロー関数は this をバインドしません。 つまり、アロー関数は this の元のバインディングを変更しません。
例を使用して説明します。

double(2);
// 4
 
double(3);
// 6

キーワード new コンストラクトが使用されているため、Count() 関数の this は新しいオブジェクトにバインドされ、 a に割り当てられます。 console.log から a.num を出力すると、0 が出力されます。

function Counter() {
this.num = 0;
}
var a = new Counter();

a.num の値を 1 秒ごとに 1 ずつ増やしたい場合、どうすれば達成できますか? setInterval() 関数を使用できます。

console.log(a.num);
// 0

出力を見てみましょう:

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
}

累積された数値の代わりに毎秒 NaN が出力されることがわかります。何が悪かったのか？
まず、次のステートメントを使用して、setInterval 関数の連続実行を停止します:

var b = new Counter();
// NaN
// NaN
// NaN
// ..

エラーが発生した理由を理解してみましょう: 前回のブログで説明したルールによれば、まず、setInterval 関数が呼び出されませんでした。宣言されたオブジェクトであり、 new キーワードは使用されておらず、bind、call、apply は使用されていません。 setInterval は単なる通常の関数です。実際、setInterval の this はグローバル オブジェクトにバインドされています。これを印刷して確認できます:

clearInterval(b.timer);

ウィンドウ オブジェクト全体が印刷されていることがわかります。 印刷を停止するには、次のコマンドを使用します。

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
console.log(this);
}, 1000);
}
var b = new Counter();

前の関数に戻ると、NaN が出力される理由は、this.num が wi​​ndow オブジェクトの num にバインドされており、window.num が未定義であるためです。
それでは、この問題をどのように解決すればよいでしょうか?アロー関数を使おう！アロー関数を使用しても、これはグローバル オブジェクトにバインドされません。

clearInterval(b.timer);

Counter コンストラクターを介したこのバインドは保持されます。 setInterval 関数では、これは引き続き新しく作成された b オブジェクトを指します。
今述べたことを検証するには、Counter 関数で this を that にバインドし、setInterval で this と that が同じかどうかを判断します。

function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

予想どおり、出力される値は常に true です。最後に、画面の印刷を終了します。

function Counter() {
var that = this;
this.timer = setInterval(() => {
console.log(this === that);
}, 1000);
}
var b = new Counter();
// true
// true
// ...

概要

1. Arrow 関数を記述するコードの構文はより簡潔です。

2. はこれをバインドしません。

以上がJavaScript アロー関数の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。