YuFy

深入浅出ES6教程『箭头函数』

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了字符串模板的用法，下面我们一起来继续学习箭头函数：

在箭头函数之前，需要看一个例子：

function show(a=1){
	let a = 2;
	console.log(a);	// Identifier 'a' has already been declared
}
show();

上面的代码告诉我们函数的参数默认已经被定义了，一经声明，就不能再用let或者const进行声明了，只能用var；这个有点跑题了，算是送大家的一个小tip吧，下面让我们一起来看箭头函数吧：

//普通函数的写法：
function show(){
	return 1;
}
show();

//上面的函数的箭头函数写法：
let show = () => 1;  // 箭头的左边是参数右边是返回值
console.log(show());

如果要想在函数里面写语句的时候，写法是这样的：

let show = (a=1,b=2) => {
	console.log(a,b);  // 1 2
}
show();

箭头函数和普通函数除了写法不同之外，还有三点不同，请看下面的例子：

let json = {
	name: '苏日俪格',
	show: function(){
		setTimeout(function(){
			console.log(this.name);	// 控制台什么都没有输出
		},1000);
	}
}
json.show();

这个例子大多都是在vue等框架下开发遇到的问题，因为this指向的是当前的函数，先要让它指向外面的json对象，就还要在外面进行转换，太麻烦，而箭头函数则不同：

let json = {
	name: '苏日俪格',
	show: function(){
		setTimeout(() => {
			console.log(this.name);	// 苏日俪格
		},1000);
	}
}
json.show();

综上所述，第一个不同之处就是箭头函数里的this指向的是定义函数所在的对象，而不是运行时所在的对象

小白：那第二个不同之处呢？
格格：第二个就是箭头函数里面不能使用arguments，如果用了就是is not defined

解决办法：就是…扩展运算符(在本章的第五小节)

let show = (...a) => {
	console.log(a);  // [1, 2, 3, 4, 5]
};
show(1,2,3,4,5);

第三个就是箭头函数不能当做构造函数来用：

let Show = ()=>{
	this.name = '苏日俪格';
}
let a = new Show();
console.log(a.name);	// Show is not a constructor

关于箭头函数我们都已经了然于心，预知扩展运算符如何，请听下回分解（＾∀＾）/~~~

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

欢迎来我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注，同时恭候：我的博客