JavaScriptの素人レッスン1：この矢印機能はまさに地獄ですか？

要約：アロー機能が大幅にこのルールの値を簡素化します。

通常の関数と矢印機能

通常の関数は、関数によって定義された関数を指します。

var hello = function () {
    console.log("Hello, Fundebug!");
}
复制代码

アロー機能は使用=>関数の定義を参照します。

var hello = () => {
    console.log("Hello, Fundebug!");
}
复制代码

JavaScript関数と矢印は言葉遣いで普通の機能差はありませんが、いくつかの微妙な違いがあり、1つの違いはこれです。

この値を所有していない矢印関数は、この関数は、スコープチェーン関数から矢印に使用されます。

この文は非常にシンプルですが、少し奇妙に耳を傾け、あまりにも冒頭で始まります。

この目的のために何をしているのですか？

この記事について十分以上のものを持って、時には傷害に侮辱を追加し、私は唯一のMDNドキュメント持ち歩き、トラブルに追加されません。これは、私のような最も重要な単語の一部を抜粋どのような関心、慎重に読んで。

関数のthisキーワードは、他の言語に比べて、JavaScriptで少し異なる動作をします。また、strictモードと非厳密モードの間にいくつかの違いがあります。

JavaScriptは、それが他の言語と同じこれはないが、その値は、コードが厳密モード（「厳密な使用」）であるか否かに依存して、かなり特有の言語です。

この値は何ですか？

現在のコードが実行されるJavaScriptのコンテキストオブジェクト。

これは、現在のコンテキストオブジェクトコードの実行です。

グローバル・コンテキスト

グローバル実行コンテキスト（任意の関数の外側）には、これは、グローバル・オブジェクトかどうかを厳密モードのかを意味します。

コードは、任意の関数を実行しませんが、エグゼクティブ・ドメインのグローバルな役割で、この値は、これはウィンドウのブラウザのためにグローバルオブジェクトです。

このルールは受け入れることは非常に簡単です。

関数コンテキスト

関数内、この値は、関数が呼び出された方法によって異なります。

この値の関数は少し病気でなく、バグのための場所を作ることは非常に簡単で、このルールは、この関数が呼び出された方法によって異なります。

また、この非常に熱狂的に関連し、この関数の値は、また、（「厳格な使用」）厳密モードかどうか...

あなたは好奇心、MDNのマニュアルを参照してくださいするには、左側に行く場合、私は状況の良い、唯一の簡単な説明何も言いません。

オブジェクトメソッドとして

関数は、オブジェクトのメソッドとして呼び出されたときに、そのこれは、メソッドがコールされるオブジェクトに設定されています。

関数は、オブジェクトのメソッドとして呼び出されると、この値の目的です。

var circle = {
    radius: 10,
    getRadius() {
        console.log(this.radius);
    }
};

circle.getRadius(); // 打印 10
复制代码

自己=この？

我々は、オブジェクトのメソッドでは、ネストされた内部機能が必要な場合は、これは私たちに本当の問題を与えるだろう、と私たちは、このコードを書かれている必要があります。

// 使用临时变量self
var circle = {
    radius: 10,
    outerDiameter() {
        var self = this;
        var innerDiameter = function() {
            console.log(2 * self.radius);
        };
        innerDiameter();
    }
};

circle.outerDiameter(); // 打印20
复制代码

外径関数は、したがって、この値は円オブジェクトであり、円形のオブジェクトのメソッドです。

その後、我々は直接書き込むthis.radiusとても素敵なので、残念ながら内部関数内径ので、書くことはできませんし、外側の関数のこの値の外径を継承しません。この外径の関数値は、円オブジェクト、10 this.radius等しいです。

ただし、この値は、円対象内径の関数ではない、それは最終的に何であることを、？これは、現在のコンテキストオブジェクトを実行し、コンテキストオブジェクトが何であるか内径機能ですか？実際に、私は気絶し、あなたがテストすることができます。

// innerDiameter函数中的this是window
var circle = {
    radius: 10,
    outerDiameter() {
        var innerDiameter = function() {
            console.log(this === window);
        };
        innerDiameter();
    }
};

circle.outerDiameter(); // 打印true
复制代码

このウィンドウの関数である内径、なぜこのウィンドウは、とにかく、ない円オブジェクトを、それを残しています。

私たちが直接内径機能でこれを使うのであれば、それは問題があります：

// 使用普通函数
var circle = {
    radius: 10,
    outerDiameter() {
        var innerDiameter = function() {
            console.log(2 * this.radius);
        };
        innerDiameter();
    }
};

circle.outerDiameter(); // 打印NaN
复制代码

だから我々は、この値の内径の伝達関数の内側の層に自己外層外径一時的な変数機能を使用する必要があります。

.bind（この）

また、使用することができます.bind(this)。この問題は、行ったり来たり回避するために：

// 使用.bind(this)
var circle = {
    radius: 10,
    outerDiameter() {
        var innerDiameter = function() {
            console.log(2 * this.radius);
        };
        innerDiameter = innerDiameter.bind(this);
        innerDiameter();
    }
};

circle.outerDiameter(); // 打印20
复制代码

しかし、一時的な変数の自己の使用、または.bind（本）の使用の両方は、非常に単純な方法ということではありません。

、我々はオブジェクト指向を使用する方法をプログラミングする場合は特に、多くの場合、これを使用する必要がどのくらいの値が少し奇妙な、短い、この通常の関数では、ほとんどの時間は、我々は（これを）.bind使用するつもりはないが、一時的に使用または変数の自己は、この値を運ぶためにすることを、もちろん、ありませんので、クール書くために、それはバグを書かれると確信しています。

MDN文書は言いました：

矢印の機能までは、すべての新しい関数は、関数がcalled.Thisは、プログラミングのオブジェクト指向のスタイルで理想的な未満であることが証明された方法に基づいて、独自にこの値を定義しました。

アロー機能

この矢印関数値の関数で、この矢印は、一般的な変数として見ることができるので、ルールは、非常に簡単です。

矢印機能は、独自にこれを持っていません。レキシカルスコープのこの値が使用されます。矢印の機能は通常の変数のルックアップ規則に従います。

アロー関数はこの値を所有していない、この矢印は、関数のスコープチェーンからの機能で使用され、その値は、関数のスコープチェーンの層によって層を見上げ、共通の変数の同じ一般的な規則に従います。

矢印の機能を使用すると、私は次の規則を遵守し、この問題は、基本的に制御を持っていないことができます。

使用する必要がobject.method()通常の関数定義を使用して呼び出される関数は、矢印の機能を使用しないでください。オブジェクトのメソッドで使用され、この値は、オブジェクト自体を指し、明確な意味を有します。
他の例では、全ての矢印の機能を使用しています。

// 使用箭头函数
var circle = {
    radius: 10,
    outerDiameter() {
        var innerDiameter = () => {
            console.log(2 * this.radius);
        };
        innerDiameter();
    }
};

circle.outerDiameter(); // 打印20
复制代码

インナー機能内径ため、この値は、それ自体と、範囲からこのストランドを使用して、上位レイヤからの機能の範囲ありません。外径内径外側の関数は、この値は円オブジェクトことである、それはこの値であり、正常な機能です。したがって、この内径関数は、円オブジェクトである外径関数から使用します。

結論

JavaScriptのブレンダン・アイクはとても不可解な特性のすべての種類は、これは素晴らしい作品の一つと考えることができ、設計のうち、10日間を過ごしています。幸いなことに、これらの年急速に発展のECMAScript標準では、欠陥のJSを補うことができますどのくらい、非常に安定し、標準ラインと新しい年でした。

このルールの値を簡素化する機能を矢印、実際には、それはあなたにこのように多くのルールああの値の通常の機能を覚えることができるあまり混乱を与えることです。。。

また、MDNのドキュメントは間違いなく宝物です、我々はより多くを見ることができます。

JSについては、私はどのような場所、我々はまだはっきりしていないブログのシリーズを書き始めるつもりですか？メッセージを残すことを望むかもしれない、私が見て、そしてあなたと共有することができます。我々はまた、私がいた、私の個人的なマイクロチャネル（KiwenLau）を追加することを歓迎Fundebug JSプログラマの愛憎関係を担当する技術者。

参照

Fundebugについて

Fundebugの JavaScriptの上の焦点は、マイクロチャネル、マイクロチャネルのゲーム、アリペイ小さなプログラム、リアルタイムのオンライン監視BUGネイティブ、Node.jsのとJavaアプリケーションに反応アプレット。2016以来、二から一一が正式に立ち上げ、Fundebugは10億の+エラーイベントの合計を取り扱う、有料顧客はサンシャイン保険、クルミのプログラミング、ライチFM、1対1、マイクロパルスの頭部、青年同盟や他の多くのコミュニティのブランドを持っています。ようこそ無料お試し！

著作権

著者に転載明記してくださいFundebugと紙住所：blog.fundebug.com/2019/06/18 / ...

ます。https：//juejin.im/post/5d0839b1f265da1bce3dd1f7で再現