0%

箭头函数( => ) ———【一天一个 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 的指向。


参考文献

欢迎关注我的其它发布渠道