Javascript 箭头函数

箭头函数

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

为什么叫Arrow Function?因为它的定义用的就是一个箭头:

1
2
3
4
5
6
7
8
//之前ES5模式时, 定义函数
Var f = function (v) {return v}
//ES6箭头函数
Var f = (v) => {return v};
//像这样只有一个参数一个返回值的还可以这么写
var f = v => v;

由于大括号被解释为代码块 所以如果箭头函数直接返回一个对象的话必须加上一个大括号

1
var fun = id => ({id:id,name:name});

下面我们看一个稍微复杂一点的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//将下面这个函数转变成箭头函数
function insert(value) {
return {into: function (array) {
return {after: function (afterValue) {
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}};
}};
}
//箭头函数
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
array.splice(array.indexOf(afterValue) + 1, 0, value);
return array;
}})});

箭头函数有几个使用注意点:

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//例: 普通函数
var id = 10;
function foo() {
setTimeout(function(){
console.log('id:', this.id);
}, 100);
};
var obj = {
id : 20
}
foo.call(obj);
//输出10; 因为在foo函数内部this指针并未发生变化.
1
2
3
4
5
6
7
8
9
10
11
12
var id = 10;
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
};
var obj = {
id : 20
}
foo.call(obj);
//使用箭头函数, 输出20

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!