箭头函数浅析

1. 前言

箭头函数是ES6标准新增的函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

2. 箭头函数

2.1 箭头函数写法注意事项

2.1.1 箭头函数只能给一个变量进行赋值，不能单独存在

示例：

let func = (x, y) => (x, y) => x + y

箭头函数只能给一个变量赋值，单独的“(x, y) => (x, y) => x + y”不符合规范。

2.1.2 如果参数只有一个，可以不加括号，如果参数多个或者0个，需要添加括号

示例：

let func1 = x => y => x + y
let func2 = (x, y) => x + y

2.1.3 如果返回一个对象，需要用一个小括号将对象包围起来，这样是为了与函数体做区分

示例：

let func = ()=>{x:1}     //  错误
let func = ()=>({x:1})   //  正确

2.2 箭头函数的this

箭头函数的this由它的外层（函数或全局）作用域来决定，并且this的指向无法通过call，bind，apply等函数改变。
示例：

let obj1 = {
    x: 1,
    func1: function() {
        console.log(this)
    }
}
let obj2 = {
    x: 2,
    func2: () => {
        console.log(this)
    }
}
obj1.func1()
obj2.func2()

输出：

func1的this指向obj1对象
func2的this指向由它的外层作用域obj2的this决定
如下示例，func2输出的this指向为obj

let obj = {
    x: 2,
    obj1: function() {
        let func2 = () => {
            console.log(this)
        }
        return func2
    }
}
obj.obj1()()

输出为：

func2的外层作用域为obj1，this指向为obj1的上一层this，也就是obj
使用call改变func1和func2的指向，func1的this变成obj，而func2的this仍然指向window

let obj = {
    x: 0
}
let obj1 = {
    x: 1,
    func1: function() {
        console.log(this)
    }
}
let obj2 = {
    x: 2,
    func2: () => {
        console.log(this)
    }
}
obj1.func1.call(obj)
obj2.func2.call(obj)

输出：

2.3 箭头函数中没有arguments(类数组)

类数组
对于一个普通的对象来说，如果它的所有property名均为正整数，同时也有相应的length属性，那么虽然该对象并不是由Array构造函数所创建的，它依然呈现出数组的行为，在这种情况下，这些对象被称为“类数组对象”。
类数组对象拥有一个特性：可以在类数组对象上应用数组的操作方法，但并不是数组的所有方法都能被类型化数组所支持（如 push 和 pop）
示例：

let value={
    5:'a',
    3:'b',
    1:'c',
    2:'d',
    length: 3
}
console.log(Array.prototype.join.call(value))

输出为：,c,d
说明：value长度为3，从下标0开始计算，value等同于数组[,'c','d']
arguments
对应于传递给函数的参数的类数组对象
示例：

function func1(a, b, c) {
    console.log(arguments)
}
let func2 = (a, b, c)=>{
    console.log(arguments)
}
func1(1, 2, 3)
func2(1, 2, 3)

输出：

2.4 箭头函数不能被new

箭头函数没有prototype，所以不能用new创建对象。

function func1(a, b, c) {
}
let func2 = (a, b, c)=>{
}
console.dir(func1)
console.dir(func2)

输出：