ES6-depth understanding of the function of the arrow

With respect to the ordinary function of the difference between

The new way of writing

this change

Not when the constructor

No prototype property

No arguments object

The new way of writing

Writing is very simple! Directly see the figure,

Conventional way to write a function

const fun = function(number){
    return number * 2
}

Use the arrow function

const fun = (number) => {
    return number * 2
}

If only one parameter may be omitted in front of the parentheses

const fun = number => {
    return number * 2
}

If only one execution statement, or even omit the braces back, but can not write return

const fun = number => number * 2

It can also be written to perform the function immediately

const fun = (() => 3 * 2)()  // 6

this change

Execution Context

Before this discussion of function of the arrow, no choice but to familiarize yourself with the execution context (Execution Context), because this pointer (this value) is stored in the execution context.

Execution context holds information required to perform important functions, which has three properties: the variable object (variable object), the scope chain (catena alberghiera scope), the this pointer (this value), they affect the parsing variables, variable scope, point of this function. Execution context into a global execution context and the function execution context .

Global code before execution, the target window will produce a global execution context, to begin pre-compiled code, which is the point when this window, then began to perform a global code.

When the function code prior to execution, the function will generate a target function execution context, the start of the pre-compiled function, which this time is directed to the case of several points (discussed below), and then starts executing the function code, the function code execution End after the function execution context was be deleted. The plurality of functions will produce a plurality of execution contexts.

Mentioned above, this sub-function pre-compiled the following four cases:

First: call function autonomously as fun () or an ordinary function is executed immediately (arrow function mode different from the function is executed immediately), the this point window ;

Second: the called function, the function is called when an object, the function execution context generated in this point of the object ;

Third: () apply () bind ( ) method of changing by this Call, this points to the first parameter is passed ;

Fourth: In the constructor, the this instance is created pointing

由于箭头函数是不能通过 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