前言
ES6出现了函数的新的定义形式——箭头函数，这种函数的定义方式，十分具有表现力，让输入、输出一目了然，也深得开发者的喜爱。
一、 箭头函数如何使用
var f = v => v;
这种定义方式等价于：
var f = function(v) {
return v;
};
是不是很简洁方便？在自己写箭头函数时在书写格式上有以下几点需要注意：
- 当入参不只1个时，需要用()括起来；
- 当没有入参时，要用()表示；
- 箭头函数的函数体多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
- 如果箭头函数直接返回一个对象，必须在对象外面加上()，否则会报错。
下面给出4个范例依次说明：
var fun = (x,y) => x + y;
fun(1,4)//5
var say = () => console.log('hello')
var area = (a,b,h) => {
var l = (a+b)/2;
return h*l
}
s = area(4,8,5)//30
let getTempItem = id => ({ id: id, name: "Temp" })
二、箭头函数的优点
- 可以让函数表达更加简洁，一目了然。
看看下面几个例子：
const isEven = n => n % 2 == 0;
const square = n => n * n;
仅仅使用一行就创建了一个“小工具”
- 简化回调函数
// 正常函数写法
var result = values.sort(function (a, b) {
return a - b;
});
// 箭头函数写法
var result = values.sort((a, b) => a - b);
- 箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。后面我们会详细介绍它的this的特性。
三、箭头函数应该注意的几个点
- 箭头函数的this会继承箭头函数的定义完成处的上下文的this，也就是它定义处外层的this，且它是固定的。
什么叫继承函数外层的this？来看几个例子：
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 }); //42
这里需要注意的是，箭头函数只是作为setTimeout()的入参，并不是在setTimeout()内部完成定义的，它完成定义的上下文(context)是函数foo的作用域，如果是普通函数，执行时this应该指向全局对象window，应该输出21。但是，箭头函数导致this总是指向函数定义生效的上下文的this（本例是{id: 42}），所以输出的是42。
对比下不使用箭头函数：
function foo() {
setTimeout(function(){
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 }); //21
这里的this由函数调用的位置决定，是在setTimeout()内部回调，所以是作为函数单独调用，在浏览器中即指向全局变量window。
再看一个例子：
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
和上面一样，第一个箭头函数中的this继承构造函数Timer的this即指向实例timer，所以timer的s1会自加；而第二个this指向全局变量，不会改变timer的s2。
再看看上面提到的函数封装中的用法：
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);//注意这一行
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};
里面直接使用了
this.doSomething(event.type), false)
因为箭头函数的this间接继承了构造函数的this，所以可以通过this使用构造函数的方法。
-
箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
-
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest 参数（形式为...变量名）代替。
var add = (...nums) => {
let sum = 0;
for(let i = 0; i < nums.length; i++){
sum += nums[i]
}
return sum
}
- 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
在这4条注意点中，第一条是最重要的，也是花大量篇幅介绍的，希望各位在使用时可以注意。
本文到此结束，更多参考：阮一峰ESMAScript6入门
网友评论