箭头函数释义
箭头函数表达式 (Arrow function expressions)语法比函数表达式更简洁,引用MDN上的定义:
箭头函数表达式的语法比
函数表达式
更简洁,并且没有自己的this
,arguments
,super
或new.target
。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
引入箭头函数有两个方面的作用:更简短的函数并且不绑定this。
箭头函数使用
基础语法:
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) =>{ return expression; }
- 左边参数右边函数语句:
(param) => { ... }
; - 左边无参数时
()
不可以省略:() =>{ ... }
; - 左边参数只有一个时,括号
()
可以省略:param => { ... }
; - 右边语句只有一个时,括号
{}
和return
可以省略:(param) => param + 1
等同于:function(param){ return param + 1; }
; - 右边语句有多个时,括号
{}
和return
不可以省略; - 右侧用一条语句返回对象时,
{}
外层加()
:param => ({ paramName: param })
;
箭头函数与普通函数
举个例子
let fuc = param => param + 1;
// 相当于
function fuc(param){
return param + 1;
}
箭头函数与this
箭头函数只会从自己的作用域链的上一层继承 this,不创建自己的this。
用匿名函数对比示例,代码用浏览器调试:
- 预期效果:在person实例化的时候,在定时器作用下让age自加。
使用匿名函数
function Person(){
this.age = 0;
this.timer = setInterval(function(){
this.age++; // this 指向 window 或 undefined
}, 1000);
}
var person = new Person();
person.age
一直就是 0
age
值为 NaN,因为匿名函数默认this指向 global(浏览器即window),this.age会自动生成一个全局的age,在person实例化的时候当于在定时器作用下一直在用全局变量的age自加,值为 undefined+undefined(NaN+undefined)
是用箭头函数
传递给setInterval的函数内的this与封闭函数中的this值相同:
function Person(){
this.age = 0;
this.timer = setInterval(() => {
this.age++; // |this| 正确地指向 p 实例
}, 1000);
}
var person = new Person();
person.age
在沿着时间自加,直到调用clearInterval(person.timer)
停下定时器为止
age
报错Uncaught ReferenceError: age is not defined
,age在全局中未定义