ES6 允许使用“箭头”（=>）定义函数

1. 定义箭头函数

原本函数的定义方式

var fn = function(a, b) {
	return a + b;
};

箭头函数的写法

let fn = (a, b) => {
	return a + b;
};

2. 箭头函数注意点

1. this是静态的，this始终指向函数声明时所在作用域下的this的值

function getName(){
	console.log(this.name);
}
let getName2 = () => {
	console.log(this.name);
}

window.name = 'YK菌';
const person = {
	name: 'yk';
}

// 直接调用
getName() // YK菌
getName2() // YK菌

// call 方法调用
getName.call(person); // yk
getName2.call(person); // YK菌   （this指向没有改变）

2. 不可以当作构造函数实例化对象，即不可以使用new命令，否则会抛出一个错误

3. 不可以使用arguments对象，该对象在函数体内不存在。（如果要用，可以用 rest 参数代替）

4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

3. 箭头函数简写

1. 省略小括号，当形参有且只有一个

let add = n => {
	return n+n;
}

2. 省略大括号(return 也要省略)， 当代码体只有一条语句

let add = (n) => n+n;

3. 最后放在一起省略就是

let add = n => n+n;

4. 箭头函数应用

1. 案例一 点击div两秒后变色

let ad = document.getElementById('ad');
ad.addEventListener("click", function(){
	let _this = this; // 保存this的值
	setTimeout(fucntion(){
		_this.style.backgroud = 'pink';
	}, 2000);

用箭头函数不用保存之前的this

let ad = document.getElementById('ad');
ad.addEventListener("click", function(){
	setTimeout(() => {
		this.style.backgroud = 'pink'; //指向的就是ad
	}, 2000);

2. 案例二 从数组中返回偶数元素 原来做法

const arr = [1,2,3,4,5,6];
const result = arr.filter(function(item){
	if(item % 2 === 0){
		return ture;
	}else {
		return false;
	}
});

使用箭头函数

const arr = [1,2,3,4,5,6];
const result = arr.filter(item => item%2 ===0);

• 箭头函数适合与this无关的回调函数；如定时器，数组方法回调
• 箭头函数不适合与this有关的回调函数；如事件回调，对象的方法

参考资料

1. 尚硅谷ES6教程 (opens new window) https://www.bilibili.com/video/BV1uK411H7on?p=9
2. 阮一峰ES6教程 (opens new window) https://es6.ruanyifeng.com/#docs/function
3. JavaScript高级程序设计(第四版) (opens new window)P288.291 https://www.ituring.com.cn/book/2472