ES6之箭头函数详解（this指向以及要点）

首先对比下箭头函数与普通函数

1、书写格式

普通函数

function(a) {
	console.log(a)
	return a
}

箭头函数

• 简洁了不少

(a) => {
	console.log(a)
	return a
}

• 如果只有一个参数，括号可以省略

a => {
	console.log(a)
	return a
}

• 如果只有一行代码，可以省略大括号，并且默认在这一行代码前加 return。所以如果你再加个return，就会报错。

function b() {
	return 1
}
//没有参数不能省略大括号
() => b() √ //此函数返回1
() => return b() ×//此函数报错

2、函数属性

• 都继承于Function,原型指向Function.prototype
• 都有name和length(参数个数)两个属性

3、函数内this指向

普通函数

• 普通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window

function b() {
	function a(){ console.log(this) }
	let c = function() {a()}
	let obj2 = {a,c}
	obj2.a()//打印出obj2,打印出调用时的对象obj2
	obj2.c()//打印出window,打印出直接调用时的对象window
}
let obj = {b}
obj.b()//使函数b内上下文this为obj

箭头函数

• 箭头函数的this在声明时指向window，在调用时指向声明时所在的上下文this

function b() {
	let a = () => console.log(this)
	let c = function() {a()}
	let obj2 = {a,c}
	obj2.a()//打印出obj,打印出声明时的上下文,而不是调用它的对象
	obj2.c()//打印出obj,打印出声明时的上下文，而不是调用时的上下文
}
let obj = {b}
obj.b()//使函数b内上下文this为obj

4、关于call,apply,bind

普通函数

• 三个方法都适用

let obj = {}
let a = function() { console.log(this) }
a.call(obj)//obj
a.apply(obj)//obj
a = a.bind(obj)
a()//obj

箭头函数

• 因为箭头函数的特殊性三个方法都不适用

let obj = {}
let a = () => { console.log(this) }
a.call(obj)//window
a.apply(obj)//window
a.bind(obj)
a()//window

箭头函数注意事项

• 不能用作构造函数
• 不能使用arguments
• 不能作为对象的方法调用，因为还是指向上下文，而不是调用的对象
• 如果需要this操作，不能用作addEventListener里传的参数