ECMAScript 6 で矢印関数はいつ使用すればよいですか? 質問する

少し前に、私たちのチームはすべてのコード（中規模のAngularJSアプリ）を Traceur を使用してコンパイルされたJavaScriptに移行しました。 バベル私は現在、ES6 以降の関数に対して次の経験則を使用しています。

• functionグローバル スコープおよびプロパティで使用しますObject.prototype。
• classオブジェクトコンストラクターに使用します。
• 他の場所でも使用でき=>ます。

ほとんどすべての場所で矢印関数が使用されるのはなぜですか?

1. スコープの安全性: 矢印関数が一貫して使用される場合、すべてがルートと同じものを使用することが保証されますthisObject。 1 つの標準関数コールバックが多数の矢印関数に混在している場合、スコープが混乱する可能性があります。
2. コンパクトさ: 矢印関数は読みやすく、書きやすいです。(これは偏った意見のように思われるかもしれないので、後でいくつか例を挙げます。)
3. 明確さ: ほとんどすべてが矢印関数である場合、functionスコープを定義するために、正規表現がすぐに目立ちます。開発者は、常に次の上位のfunctionステートメントを調べて、それが何であるかを確認できますthisObject。

グローバル スコープまたはモジュール スコープで常に通常の関数を使用するのはなぜですか?

1. アクセスしてはならない関数を示しますthisObject。
2. オブジェクトwindow(グローバル スコープ) は明示的にアドレス指定するのが最適です。
3. 多くのObject.prototype定義はグローバル スコープ内に存在します (String.prototype.truncateなど)。これらは一般的に 型である必要がありますfunction。functionグローバル スコープで一貫して を使用すると、エラーを回避できます。
4. グローバル スコープ内の多くの関数は、古いスタイルのクラス定義のオブジェクト コンストラクターです。
5. 関数には名前を付けることができます¹function foo(){} 。これには 2 つの利点があります: (1) 特に他の関数呼び出しの外側で書くよりも書きやすいconst foo = () => {}。 (2) 関数名はスタック トレースに表示されます。すべての内部コールバックに名前を付けるのは面倒ですが、すべてのパブリック関数に名前を付けるのはおそらく良い考えです。
6. 関数宣言は吊り上げられた、（宣言される前にアクセスできることを意味します）、これは静的ユーティリティ関数で便利な属性です。

オブジェクトコンストラクタ

矢印関数をインスタンス化しようとすると例外がスローされます。

var x = () => {};
new x(); // TypeError: x is not a constructor

function Person(name) {
    this.name = name;
}

class Person {
    constructor(name) {
        this.name = name;
    }
}

function CommentController(articles) {
    this.comments = [];

    articles.getList()
        .then(articles => Promise.all(articles.map(article => article.comments.getList())))
        .then(commentLists => commentLists.reduce((a, b) => a.concat(b)));
        .then(comments => {
            this.comments = comments;
        })
}

function CommentController(articles) {
    this.comments = [];

    articles.getList()
        .then(function (articles) {
            return Promise.all(articles.map(function (article) {
                return article.comments.getList();
            }));
        })
        .then(function (commentLists) {
            return commentLists.reduce(function (a, b) {
                return a.concat(b);
            });
        })
        .then(function (comments) {
            this.comments = comments;
        }.bind(this));
}