本文来源于阅读阮一峰《ECMAScript 6 入门》的箭头函数所作笔记。
ES6 允许使用“箭头”(=>
)定义函数。
基本用法
// 只有一个参数
var f = v => v
// 没有参数或多个参数就用圆括号代表参数部分
var f = () => 5
var sum = (num1,num2) => num1 + num2;
// 箭头函数的代码块多余一条语句,就要使用大括号将它们括起来,并且使用 return 语句返回
var sum = (num1,num2) => {return num1 + num2}
// 由于大括号被解释为代码块,所以箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错
var getTempItem = id => ({id:id,name:"temp"})
// 箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号
let fn = () => void doesNotReturn()
// 箭头函数可以与变量解构使用结合使用
const full = ({first,last}) => first + '' + last
// 等同于
function full(person){
return person.first + '' + person.last
}
好处
- 箭头函数使得表达式更加简洁
- 箭头函数可以简化回调函数
例子:
// 使得表达更加简洁
const isEven = n => n % 2 === 0
const square = n => n * n
//简化回调函数
//正常函数写法
[1, 2, 3].map(function (x) {
return x * x
})
// 箭头函数的写法
[1, 2, 3].map(x => x * x)
//正常函数写法
var result = values.sort(function (a, b) {
return a - b
})
// 箭头函数的写法
var result = values.sort((a, b) => a - b)
// rest 参数与箭头函数结合的例子
const numbers = (...nums) => nums
numbers(1, 2, 3, 4, 5)
const headAndTail = (head, ...tail) => [head, tail]
headAndTail(1, 2, 3, 4, 5)
使用注意点
- 函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象 - 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用rest
参数代替 - 不可以使用
yield
命令,因此箭头函数不能用作Generator
函数
this
对象的指向是可变的,但是在箭头函数中是固定的
例子:
function foo() {
setTimeout(() => {
console.log('id:', this.id)
}, 100)
}
var id = 21
foo.call({ id: 42 })
--------------------------------------------------------
> id:, 42
解析:
setTimeout
的参数是一个箭头函数,这个箭头函数的定义生效是在 foo
函数生成时,而它的真正执行等到100毫秒后。如果是普通函数,执行时 this
应该指向全局对象 window
,这时应该输出 21
。但是,箭头函数导致 this
总是指向函数定义生效时所在的对象(本例是 {id:42}
),所以输出是 42
。
箭头函数可以让 setTimeout
里面的 this
,绑定定义时所在的作用域,而不是指向运行时所在的作用域
例子:
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
---------------------------------------------------------------------------------
> s1: 3
> s2: 0
解析:
Timer
函数内部设置了两个定时器,分别使用了箭头函数和普通函数。
前者的 this
绑定定义时所在的作用域(即 Timer
函数),后者的 this
指向运行时所在的作用域(即全局对象)。
所以,3100毫秒后,timer.s1
被更新了 3次,而 timer.s2
一次都没更新。
箭头函数可以让 this
指向固定化,这种特性很有利于封装回调函数。
var handler = {
id:'123456',
init:function(){
document.addEventListener('click',event => this.doSomething(event.type),fasle)
},
doSomething: function(type){
console.log('Handling' + type + ' for ' + this.id)
}
}
解析:
init
方法中,使用了箭头函数,这导致这个箭头函数里面的 this
,总是指向 handler
对象。否则,回调函数运行时,this.doSomething
这一行会报错,因为此时 this
指向 document
对象。
this
指向的固定化,并不是因为箭头函数内部有绑定 this
的机制,实际原因是箭头函数根本没有自己的 this
,导致内部的 this
就是外层代码块的 this
。正是因为它没有 this
,所以也就不能作构造函数。
箭头函数转成 ES5 的代码:
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id)
}, 100)
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id)
}, 100)
}
上面代码中,转换后的 ES5 版本清楚地说明了,箭头函数里面根本没有自己的 this
,而是引用外层的 this
。
除了 this
,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments
、super
、new.target
。
function foo() {
setTimeout(() => {
console.log('args:', arguments)
}, 100)
}
foo(2,4,6,8)
------------------------------------
> args:, [object Arguments]
解析: 箭头函数内部的变量 arguments
,其实是函数 foo
的 arguments
变量。
另外,由于箭头函数没有自己的 this
,所以当然也就不能用 call()
、apply()
、bind()
这些方法去改变 this
的指向。
长期以来,JavaScript 语言的 this
对象一直是一个令人头疼的问题,在对象方法中使用 this
,必须非常小心。箭头函数“绑定” this
,很大程度上解决了这个困扰。
不适用场景
由于箭头函数使得 this
从“动态”变成“静态”,下面两个场合不应该使用箭头函数:
第一个场合是定义对象的方法,且该方法内部包括 this
:
var lives = 10
const cat = {
lives:9,
jumps:()=>{
this.lives --
console.log(this.lives)
}
}
cat.jumps()
--------------------------------------------------
> 9
解析:
上述代码中,cat.jumps()
方法是一个箭头函数,这是错误的。调用 cat.jumps()
时,如果是普通函数,该方法内部的 this
指向 cat
;如果写成上面那样的箭头函数,使得 this
指向全局对象,因此不会得到预期结果。这是因为对象不构成单独的作用域,导致 jumps
箭头函数定义时的作用域就是全局作用域。
第二个场合是需要动态 this
的时候,也不应使用箭头函数:
var button = document.getElementById('press')
button.addEventListener('click', () => {
this.classList.toggle('on')
})
--------------------------------------------------------------------
>Uncaught TypeError: Cannot read property 'addEventListener' of null
解析:上面代码运行时,点击按钮会报错,因为 button
监听函数是一个箭头函数,导致里面的 this
就是全局对象。如果改成普通函数,this
就会动态指向被点击的按钮对象。