【ES规范】ES6 箭头函数详解

目录

一、基础语法

形参的情况

函数体的情况

二、箭头函数中的this

三、call apply 调用

四、不能使用argument

五、不能使用new 

---

箭头函数（Arrow Function)表达式的语法比函数表达式更短，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

一、基础语法

基础语法 （参数1，参数2，参数3……）=> {函数声明}

形参的情况

1.没有形参的情况下，小括号不能省略 

let fun1 =() =>console.log("没有形参，小括号不能省略，省略了会报错")
fun1();

小括号省略了会报错 

2. 只有一个形参的时候，（）可以省略

let fun2 = a => console.log(a);
fun2('222');

3.两个及其以上个数的形参的时候，（）不可以省略

let fun3= (x,y) => console.log(x,y);
fun3(23,56);

函数体的情况

1.函数只有一条语句或者是个表达式的时候，{ } 可以省略，会自动返回语句执行的结果或者表达式的结果

let fun4 = (x,y) => x+y;
    console.log(fun4(23,45));

2.函数体不止一条语句或者表达式的情况下，{ }不可以省略

let fun5=(x,y) => {
        console.log(x+y);
        x*y
    };
    console.log(fun5(2,4)); //undefined
    fun5(2,4);//6

3. 返回对象时，需要用（）括起来，因为{ }已经去定义语句块了

//3. 返回对象时，需要用（）括起来
  let fun6 =(name, age,gender) =>{
      return (person={
          name,
          age,
          gender
      })
  };
  console.log(fun6('Jack',29,'male'));

4. 直接作为事件手柄

document.addEventListener('click',ev => {
    console.log(`我是事件：${ev}`)  //我是事件：[object MouseEvent]
});

5.作为数组排序回调

let arr = [1,9,2,6,5,14,52,12].sort((a,b)=>{
    if(a-b>0){
        return 1
    }else{
        return -1
    }
});
console.log(arr); //Array(8) [ 1, 2, 5, 6, 9, 12, 14, 52 ]

二、箭头函数中的this

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this；

箭头函数不会自己创建this,它只会从自己作用域链的上一层继承this:
扩展理解： 箭头函数的this看外层的是否有函数，
     如果有，外层函数的this就是内部箭头函数的this，
     如果没有，则this是window。

/**测试箭头函数的this**/
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let btn3 = document.getElementById('btn3');
btn1.onclick=function () {
  console.log(this); //<button id="btn1">
};

btn2.onclick=() => {
    console.log(this); //Window
};


let obj={
    name:'箭头函数',
    getName:() => {
        btn3.onclick =() =>{
            console.log(this);
        }
    }
};
obj.getName();//Window

这也就是说this的指向固定不变了。

function Person() {
    this.age=0;
    console.log(`我是第一个this:${this}`); //我是第一个this:[object Object]

    setInterval( () =>{
        this.age++;
        console.log(this) //Object { age: 1 },这里的对象指向了person对象
    },5000)
}
var p=new Person();

不适用箭头函数的情况下，内层函数和外层函数的this指向不一样

function Person() {
    // Person() 构造函数定义 `this`作为它自己的实例.
    this.age = 0;
    console.log(`我是第一个this:${this}`); //我是第一个this:[object Object]

    setInterval(function growUp() {
        // 在非严格模式, growUp()函数定义 `this`作为全局对象,
        // 与在 Person()构造函数中定义的 `this`并不相同.
        this.age++;
        console.log(this) //Window
    }, 1000);
}

三、call apply 调用

由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数，不能绑定this，他们的第一个参数会被忽略。（这种现象对于bind方法同样成立）

/** call apply bind调用**/
var adder = {
    base : 1,

    add : function(a) {
        var f = v => v + this.base;
        return f(a);
    },

    addThruCall: function(a) {
        var f = v => v + this.base;
        var b = {
            base : 2
        };

        return f.call(b, a);
    }
};

console.log(adder.add(1));         // 2
console.log(adder.addThruCall(3));  //4

四、不能使用argument

var func =(x,y) =>{
    console.log(arguments)
};
func(1,3);

var arguments = [1, 2, 3];
var arr1 = () => arguments[2];

console.log(arr1()); // 3

function foo(n) {
    var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
    console.log(f()); //NaN
    console.log(`arguments[0]是：${arguments[0]}`) //arguments[0]是：1
}

foo(1);
// 但是使用arguments[1]，输出的就是NaN  undefined

五、不能使用new 

/**不能使用new**/
var Animal=(name,age) => {
    this.name=name;
    this.age=age
};
var dog=new Animal('Puppy',2);
console.log(dog)

扩展内容参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions