箭头函数( => ） ———【一天一个 es6 语法】

发表于 更新于

Function

每个函数都是 Function 类型的实例，由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，函数通常是使用函数声明语法定义的：

1
2
3
function sum (num1, num2) {
    return num1 + num2;
}

这与下面使用函数表达式定义函数的方式几乎相差无几：

1
2
3
var sum = function(num1, num2) {
    return num1 + num2;
};

最后一种定义函数的方式是使用Function构造函数，最后一个参数始终都被看成是函数体，而前面的参数则枚举出了新函数的参数：

1
Function("num1", "num2", "return num1 + num2")

其中函数声明语法具有函数声明提升（function declaration hoisting）,解析器会率先读取函数声明，并使其在执行任何代码之前可用。其余的时候函数声明与函数表达式的语法其实是等价的。

箭头函数针对的是函数表达式定义的函数。

基本语法

1
2
3
4
5
6
var funcName = function(para) {
    return "xxx";
};

// 等同于
var funcName = para => para + "xxx";
1
2
3
4
5
6
var funcName = function(para1, para2) {
    console.log(para1 + " and " + para2);
};

//等同于
var funcName = (para1, para2) => console.log(para1 + " and " + para2);

从形式上来看也就是把函数表达式定义的函数，function 去掉，在参数括号外面加 => 。没有参数用()占位，只有一个参数时可以省略括号，后面的代码块部分多于一条语句就要用大括号括起来，而只有一条语句可以省略大括号，如果是 return 语句，还可以省略 return。

当然仅仅为了好看，箭头函数存在的意义并不大。

使用注意点

（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

1
2
3
4
5
6
7
8
9
var objName = {
    food: ["chicken", "hamburger", "French Fries"],
    print: function(delay=1000) {
        setTimeout(function(){
            console.log(this.resorts.join(","))
        }, delay)
    }
}
objName.print() // Cannot read property 'join' of undefined
1
2
3
4
5
6
7
8
9
var objName = {
    food: ["chicken", "hamburger", "French Fries"],
    print: function(delay=1000) {
        setTimeout(()=>{
            console.log(this.resorts.join(","))
        }, delay)
    }
}
objName.print() //chicken, hamburger, French Fries
1
2
3
4
5
6
7
8
9
var objName = {
    food: ["chicken", "hamburger", "French Fries"],
    print: (delay=1000)=> {
        setTimeout(()=>{
            console.log(this.resorts.join(","))
        }, delay)
    }
}
objName.print() //Cannot read property 'join' of undefined

第三段代码将 print 函数声明改为一个箭头函数的形式意味着其中关键字 this 指代的对象就是 object（浏览器中是 window）。
setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码，上面的代码都是 1s 后执行 console.log 所在的函数。

（2）不可使用arguments对象，如果要用，可以用扩展运算符(...)将函数参数搜集到一个数组中。

1
2
3
function(...theArgs) {
    return theArgs;
}

（3）箭头函数没有自己的 this。
不能用 call()、apply()、bind() 这些方法去改变 this 的指向。

参考文献