箭头函数是ES6中新增一个函数表达形式,它是对函数的一种简化ES6允许使用“箭头”(=>)定义函数。
Eg:
var f = v => v;
等同于之前
var f = function(v) {
return v;
};
const Even = n => n % 2 == 0;
const Square = n => n * n;
注:
箭头函数就是省略了function
参数集与函数体之间一定要有一个箭头=>
对于参数集而言:
零个参数用 () 表示;
一个参数可以省略 ();
多参数不能省略 ();
Eg:
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
Eg:
var getTempItem = id => ({ id: id, name: "Temp" });
[1,2,3].map(function (x) {
return x * x;
});
// [1, 4, 9]
[1,2,3].map(x => x * x);
//[1, 4, 9]
不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
const haha = (head, ...tail) => [head, tail];
haha(1, 2, 3, 4, 5)
[1, Array[4]]
箭头函数有几个使用注意点。
(1) 箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。。
function foo() {
setTimeout(() => {
console.log(‘id:‘, this.id);
}, 100);
}
var id = 21;
foo.call({ id: 22 });
// id: 22
setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 22}),所以输出的是22。
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
console.log(this);
this.func();
}, 100);
}
};
o.test();
//Window {external: Object, chrome: true, document: document, CNT_SELECT: undefined, jQuery17105021754387381239: Object…}
// this.func is not a function(anonymous function)
出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
var _this = this;
setTimeout(function() {
_this.func();
}, 100);
}
};
o.test();
// 1
先保存的this就行了。
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, 100);
}
};
o.test();
// 1
(2)this是不会改变指向对象的
var x = 1,
o = {
x : 10,
test : () => this.x
};
o.test();
// 1
o.test.call(o);
// 1