ES6标准新增了一种新的函数:Arrow Function(箭头函数)
箭头函数相当于匿名函数,且简化了函数定义。
1、箭头函数有两种格式:
① 只包含一个表达式,{ ... }和return都省略掉。
i => i * i
② 可以包含多条语句,不能省略{ ... }和return。
x => {
if (x > 0)
return x * x;
else
return - x * x;
}
2、箭头函数的参数个数:
① 无参数:用括号()
() => 3.14
② 1个参数:
i => i * i
相当于:
function (i) {
return i * i;
}
③ 至少2个参数:用括号()括起来
(a, b) => a + b
相当于:
function (a, b) {
return a + b;
}
④ 可变参数:
(x, y, ..., arr) => {
var i, sum = x + y;
for (i = 0; i < arr.length; i++)
sum += arr[i];
return sum;
}
注意:
如果要返回一个对象,如果是单表达式,这么写会报错:x => { name: “Alice” }
因为和函数体的{ ... }有语法冲突,改为:x => ({ name: “Alice” })
3、this
虽然箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。也就是说,this对象是定义时所在的对象,而不是运行时所在的对象。箭头函数没有自己的this值,箭头函数内的this值继承自外围作用域。
① 一个内部函数不能直接从外部函数访问到this:
var object = {
name: "My object",
getName: function() {
var func = function() {
return this.name; // this指向window或undefined
};
return func();
}
};
alert(object.getName()); // 输出:undefined
除了可以通过将this对象存储在另一个变量(如that)中来解决这个问题,还可以使用箭头函数:
var object = {
name: "My object",
getName: function() {
var func = () => {
return this.name; // this指向object
};
return func();
}
};
alert(object.getName()); // 输出:My object
② 由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略。
var object = {
name: "My object",
getName: function() {
var func = () => {
return this.name; // this指向object
};
return func.call({name: "Bruce"});
}
};
alert(object.getName()); // 输出:My object
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!