矢印の機能のES6-深い理解

差の通常の機能に関して

執筆の新しい方法

この変更

しない場合は、コンストラクタ

いいえprototypeプロパティありません

引数なしオブジェクトありません

執筆の新しい方法

書き込みは非常に簡単です！直接図を参照してください、

関数を記述するために、従来の方法

CONST楽しい= 関数（数）{
     戻り数* 2 
}

矢印関数を使用

CONST楽しい=（番号）=> {
     戻り数* 2 
}

唯一つのパラメータは、括弧の前に省略することができる場合

CONST楽しい=番号=> {
     戻り数* 2 
}

一つだけ実行文場合、あるいはバック中括弧を省略しますが、リターンを書き込むことはできません

constの楽しさ=数=>数* 2

また、すぐに機能を実行するために書き込むことができます

constの楽しさ=（（）=> 3 * 2）（）   // 6

この変更

実行コンテキスト

矢印の機能のこの議論の前に、に慣れるせざるを得ない実行コンテキストこのポインタ（この値を）実行コンテキストに格納されているため、（実行コンテキスト）。

実行コンテキストは、3つのプロパティを持つ重要な機能を実行するために必要な情報を保持する：可変オブジェクト（可変オブジェクト）、スコープチェーン（カテナalberghiera範囲）、このポインタ（この値を）、彼らは、解析変数、変数のスコープに影響を及ぼし、この関数のポイント。実行コンテキストグローバル実行コンテキストおよび機能の実行コンテキスト。

グローバルコードが実行される前に、ターゲットウィンドウは、このウィンドウは、その後、世界的なコードを実行し始めた時点で、プリコンパイルされたコードを、開始するために、グローバルな実行コンテキストが生成されます。

とき実行前に関数コードを、関数は、この時間は、いくつかの点（後述）の場合を対象とし、次に機能コード、機能コードの実行終了の実行を開始されるプリコンパイルされた関数の開始を目標関数実行コンテキストを生成します機能の実行コンテキストの後に削除されました。複数の機能は、実行コンテキストを複数生成します。

上述したように、このサブ機能は、以下の4つのケースをプリコンパイルされました：

まず：自律的に楽しい（）または通常の関数として（機能とは異なる矢印機能モードを即座に実行される）、すぐに実行される関数を呼び出し、この時点のウィンドウを、

第二：呼び出された関数は、関数が呼び出されたときにオブジェクトに生成された関数の実行コンテキストオブジェクトのこの時点。

第三：（）（）バインド（適用）この呼び出しによって変化させる方法を、最初のパラメータには、この点が渡されます。

第四：コンストラクタでは、このインスタンスが作成されるポインティング

由于箭头函数是不能通过 call() apply() bind() 方法改变 this，也不能当做构造函数，所以接下来只演示第一和第二种情况的代码

var a = {
    origin: 'a',
    b: {
        origin: 'b',
        show: function(){
　　　       var origin = 'show';
            console.log(this.origin);
　      }
    }
}
var origin = 'window'
a.b.show();      // 因为 b 对象调用了 show 函数，所以 show 函数的执行上下文中的 this 指针指向 b 对象
var fun = a.b.show;     // 注意这里是将 show 函数赋值给fun，相当于 var fun = function(){console.log(this)}
fun();      // 因为 fun 是自主调用，所以 this 指针指向 window，自然就打印 window 对象了

可能有人会有这个疑惑：a.b.show() 中，a 调用了 b，是不是 b 的 this 指向 a 了？

前面也说到了，this 储存在执行上下文中，而只有全局和函数才会产生执行上下文，在执行上下文里记录着 this，而 b 是全局中 a 对象里面的一个对象，不存在谁调用它，它的 this 就是谁的说法。

接下来理解箭头函数中的 this 就非常容易了。

箭头函数中的 this

首先，箭头函数不会创建自己的 this，它只会从自己的作用域链上找父级执行上下文的 this，而不是谁调用它，它的 this 就是谁。所以箭头函数中的 this，取决于你上层执行上下文的 this 。

下例中，

obj 分别调用了 show1 和 show2 两个方法，所以show1 和 show2 中的 this 都是指向 obj，

show1 中， setTimeout 里面是箭头函数，从作用域链中找到 show1 中的 this，所以它的 this 就是 obj 对象；

show2 中，setTimeout 里面的函数换成普通函数，函数自主调用，所以他的 this 就是 window 对象

var id = 0;
var obj = {
    id: 1,
    show1: function(){
        setTimeout(() => {
            console.log(this.id)
        }, 1000)
    },

　　show2: function(){
　　　　setTimeout(function(){
　　　　　　console.log(this.id)
　　　　}, 2000)
　　}
}

obj.show1();    // 打印 1
obj.show2();    // 打印 0

不能当成构造函数

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

没有 prototype 属性

var Foo = () => {};
console.log(Foo.prototype); // undefined

没有 arguments 对象

在大多数情况下，使用' ... ' 运算符是比使用 arguments 对象的更好选择。

function foo(...arg) { 
  return arg; 
}
foo(1, 2, 3, 4); // 1

function foo(...numbers) { 
    numbers.forEach((number)=>{
        console.log(number);
    })
} 
foo(1, 2, 3, 4);  // 1 2 3 4

差の通常の機能に関して

執筆の新しい方法

この変更

不能当成构造函数

没有 prototype 属性

没有 arguments 对象

おすすめ