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里传的参数