JavaScript初心者は必ず「矢印関数」を見ます.

矢印関数は文法の変化にしか見えないが、thisの作用領域にも影響を与えている.

原文:JavaScript:Arrow Functions for Beginner

翻訳者:Fundbug

この文章は意訳を採用して、著作権は元の作者の所有になります.
本論文では矢印関数の利点を紹介します.
より簡潔な文法
まず、従来の文法で関数を定義します.

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

この関数は矢印関数を使って、1行のコードだけで済ませることができます.

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

かっこいいですか極端に簡潔な例ですが、コードを書く際の矢印関数の利点をよく表しています.矢印関数の文法を深く理解します.

parameters => {
    statements;
};

パラメータがない場合は、さらに簡略化することができる.

() => {
    statements;
};

パラメータが一つしかない場合は、括弧を省略できます.

parameters => {
    statements;
};

戻り値が1つの表式だけであれば、大かっこは省略できます.

parameters => expression

//    :
function (parameters){
  return expression;
}

矢印の文法はもう覚えました.実戦でやりましょう.Chromeブラウザ開発者コンソールを開き、入力:

var double = num => num * 2;

変数doubleを矢印関数に結びつけ、この関数にはパラメータnumがあり、num * 2を返します.この関数を呼び出す:

double(2);
// 4

double(3);
// 6

行コード解決バグ監視:Funebug
部分thisのバインディングがありません.
一般的な関数とは異なり、矢印関数はthisをバインディングしない.または、矢印関数は、this本来のバインディングを変更しない.一例を使って説明します.

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

キーワードnewを使用して構成されているので、Counter()関数のthisは新しいオブジェクトに結合され、aに値が与えられる.console.logでa.numを印刷すると、0が出力されます.

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

もし一秒ごとにa.numの値をプラスしたいなら、どうやって実現しますか?setInterval()関数が使用できます.

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

出力結果を見てみます.

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

一秒ごとにNaNという数字が印刷されています.いったいどこが間違っていますか?まず、次のようなステートメントを使用して、setInterval関数の連続実行を停止します.

clearInterval(b.timer);

なぜエラーが発生したのかを理解しようとします.前のブログで説明した規則によると、まず関数setIntervalはある声明の対象に呼び出されていません.newキーワードも使用されていません.bind、call、applyとsetIntervalを使用していません.setIntervalは普通の関数です.実際にはthisの中のthisは、大域オブジェクトに紐付けされている.windowをプリントアウトして確認できます.

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

NaNオブジェクト全体がプリントされていることが分かります.次のコマンドで印刷を停止します.

clearInterval(b.timer);

前の関数に戻ると、this.numはwindowオブジェクトのnumにバインドされているため、window.numは定義されていない.
じゃ、私たちはどうやってこの問題を解決しますか?矢印関数を使用します.矢印関数を使用すると、thisが大域オブジェクトにバインドされないようになります.

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

Counterコンストラクタによって結合されたthisは保持されます.setInterval関数において、thisは依然として私たちが新しく作成したbオブジェクトを指す.
先ほどの表現を検証するために、Counter関数のthisをthatに結びつけ、setIntervalにおいてthisとthatとが同じかどうかを判断することができる.

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

私たちが望むように、プリント値は毎回trueです.最後に、スクリーン印刷を終了します.

clearInterval(b.timer);

締め括りをつける

矢印関数書き込みコードは、より簡潔な文法を有する.

はthisをバインドしない.

Funebugについて
FunndebugはJavaScript、微信小プログラム、微信小ゲーム、支払宝小プログラム、React Native、Node.js、JavaオンラインでリアルタイムBUG監視を適用します.2016年に双十一が正式にオンラインしてから、Fundebugは累計で10億＋エラー事件を処理しました.有料顧客はGoogle、360、金山軟件、庶民網など多くのブランド企業があります.皆さん、無料で試用してください.
著作権声明
転載する時、作者のFunebugと本文の住所を明記してください.https://blog.fundebug.com/2017/05/25/arrow-function-for-beginner/