一:箭头函数的格式
a:一种为只有一条语句,可以省略{}和return。
x => x * x;
相当于:
function(x) {
return x * x;
}
b:一种为多条语句,不可以省略{}和return。
x => {
if (x > 0) {
return 1;
}
return 2;
}
相当于:
function(x){
if (x > 0) {
return 1;
}
return 2;
}
注意:
a.当无参数时或有多个参数时,需要用括号()括起来。
(x, y)=> x + y;
b.当省略{}和return时,返回了一个对象,对象要用括号()括起来。
x=> ({color:"red"});
二:箭头函数的this
a.箭头函数没有自己的 this,其内部的 this 绑定到它的外围作用域。对象内部的箭头函数若有this,则指向对象的外围作用域。
window.color = "red";
//let 声明的全局变量不具有全局属性,即不能用window.访问
let color = "green";
let obj = {
color: "blue",
getColor: () => {
return this.color;//this指向window
}
};
let sayColor = () => {
return this.color;//this指向window
};
obj.getColor();//red
sayColor();//red
b.箭头函数无法使用 call()或 apply()来改变其运行的作用域。
window.color = "red";
let color = "green";
let obj = {
color: "blue"
};
let sayColor = () => {
return this.color;
};
sayColor.apply(obj);//red