ES6新语法之箭头函数

前言：在ES6语法中，新增了一种函数特性，就是箭头函数。顾名思意，箭头函数就是一种使用箭头（ => ) 定义函数的新语法，但是与传统函数有些许不同。

1.没有 this, arguments, super, new.target 绑定，箭头函数的 this， arguments， super，new.target 是由箭头函数外围最近一层决定。

2.不能通过 new 关键字调用  箭头函数没有   [[construct]]   方法，所以不能被当作构造函数，如果通过 new 关键字调用函数，程序会抛出错误

3.没有原型 由于不可以通过 new 关键字调用函数，因而没有构造原型的需求，所以箭头函数不存在 prototype 这个属性

4.不可以改变 this 的绑定  函数内部的 this 值不可被改变，在函数的生命周期内始终保持一致

5.不支持 arguments 对象  箭头函数没有arguments 绑定，所以你必须通过命名参数和不定参数这两种形式来访问函数的参数

6.不支持重复的命名参数   无论在严格还是在非严格模式下，箭头函数都不能支持重复的命名参数，而在传统函数的规定下，只有在严格模式下才不能有重复的命名参数

一、箭头函数语法

箭头函数的语法多变，根据实际的使用场景有多种形式。所有变种都由函数参数、箭头、函数体组可以分成，根据使用的需求不同，参数和函数体可以分别采用多种不同形式。

1.1、箭头函数采用单一参数，并且只是简单返回了参数的值

let a = value => value


//实际相当于

let a = function(value) {
    return value;
}

1.2、如果要传入两个或两个以上的参数，要在参数的两端添加一对小括号

let sum = (num1, num2) => num1 + num2;


// 实际相当于

let sum = function(num1, num2){
    return num1 + num2;
}

1.3、如果没有参数，也要在声明的时候写一组没有内容的小括号

let getValue = () => "this is value";



//实际相当于

let getValue = function(){
    return "this is value";
}

1.4、如果想创建一个空函数，需要写一对没有内容的花括号

let dosomething = () => {};

//实际相当于

let dosomething = function(){
}

1.5、如果想让函数返回一个对象字面量，则需要将该字面量包裹在小括号里

let obj = (id, name) => ({id: id, name: "zhou"});


//实际相当于

let obj = function(id, name) {
    return {
         id: id;
         name: "zhou"
      }
}

二、箭头函数没有this绑定

箭头函数内的this取决于上下文，不取决于函数的执行环境

let obj = {
        id: 123,

        init: function(){
          document.addEventListener('click', function(event){
            this.doSomething(event.type);  // this 指向 document
          }, false)
        },

        doSomething: function(){
          console.log(type + this.id);
        }
      }



let obj = {
        id: 123,

        init: function(){
          document.addEventListener('click', (event) => 
            this.doSomething(event.type), false); // this 指向 obj
        },

        doSomething: function(){
          console.log(type + this.id);
        }
      }

箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则this绑定的是最近一层非箭头函数的this；否则，this的值会被设置为全局对象