JavaScript箭头函数

箭头函数

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

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。

特性

没有绑定this

没有自己的argument

没有prototype属性

没有super或new.target

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。

不能当作构造函数,不能进行new操作

语法

一般语法


(param1, param2, …, paramN) => { statements }

当只有一个参数时，圆括号是可选的，下面两种都对。


param1 => { statements }
(param1) => { statements }

如果没有参数时，需要保留圆括号。


// 没有参数的函数应该写成一对圆括号。
() => { statements }

另外还有一些简写写法


(param1, param2, …, paramN) => expression
//相当于：
(param1, param2, …, paramN) =>{ return expression; }

建议无论是否只有一个参数，都保留圆括号（方便以后添加参数或删减参数）

高级语法：


//加括号的函数体返回对象字面量表达式：
params => ({foo: bar})

//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数的this

而箭头函数不会创建自己的this,它的this是在定义函数的时候绑定的,它只会在自己的作用域链向外逐层地查找，找到最近的普通函数的this对象（类似查找变量），然后继承这个this

被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变.并且在箭头函数this对象的指向是不能直接改变的。


function fn1(){ // 第一层普通函数
    console.log(this); // window
    let obj1 = { // 第二层对象
        fn2: () => { // 第三层箭头函数
            console.log(this); // window
        }
    }
    obj1.fn2();
}
fn1()

fn1是普通函数，它的this指向全局对象window，而fn2是一个箭头函数，它被嵌套在fn1的obj1对象内，它继承了fn1的this，因此箭头函数的this也指向window。

当箭头函数的作用域链都没有能继承的this时，它的指向是全局对象。如下


let arrow = () => {
     console.log(this);
  }
arrow() // window对象


    let o1 = {
        o2: {
            arrow: () => {
                console.log(this);
            }
        }
    }
    o1.o2.arrow() // window对象

上面代码中箭头函数都无法在祖先作用域中找到能继承的this，因此无论是否在严格模式下都会指向window，下面把o2改成一个普通函数（拥有自己的this），此时箭头函数能找到继承的this，于是指向。


let o1 = {
    o2(){
        console.log(this); // o1对象
        let arrow = () => {
            console.log(this);
        }
        arrow()
    }
}
 o1.o2() // o1对象

箭头函数的arguments

箭头函数没有自己的arguments，直接使用会报错


let fn1 = (a) => {
    console.log(arguments);
}
fn1("a")
// Uncaught ReferenceError: arguments is not defined

但是和this一样，它能继承普通函数的arguments


function fn1(a,b){
    console.log(arguments); // Arguments(2){...}
    let arrow = () => {
        console.log(arguments); // Arguments(2){...}
    }
    arrow()
}
fn1("a","b")

在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。

使用 new 操作符

箭头函数不能用作构造器，和 new一起用会抛出错误。


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

使用prototype属性

箭头函数没有prototype属性。


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

使用 yield关键字

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

本质

箭头函数自身没有绑定this，因此它会顺着词法作用域链查找绑定有thisValue的环境记录，找到并使用这个thisValue，也就是说其实箭头函数的this取决于其定义在词法作用域中的哪个位置。

在传统的函数中，this指向的是函数的调用者，也就是说只有在函数调用时才能确定this的指向，这很不直观，而箭头函数弥补了这个缺陷，因为箭头函数的this取决于其在代码中的位置，可以很直观地确定箭头函数中this的指向。

箭头函数非常适合作为回调函数使用。