1 前言
请先看 -> 如何理解this关键词
ES6中引入了一种无法使用4种this绑定规则的特殊函数类型,箭头函数(arrow function)
箭头函数根据外层作用域来决定this(有词法作用域的味道)
2 例子
看下面的两个例子
example #11
2
3
4
5
6
7
8
9
10function x(){
this.a = 3//利用obj调用时候 this指向obj
function y(){
this.a = 2//this指向全局对象了
}
y()
}
var obj = {}
x.apply(obj)
console.log(obj,global.a)//{a:3} 2
可以看到上面函数x中的y函数的this指向的是全局对象，因为y的调用使用默认绑定
改进方法如下
example #21
2
3
4
5
6
7
8
9
10
11function x(){
this.a = 3//利用obj调用时候 this指向obj
that = this
function y(){
that.a = 2//利用js闭包的特性记住了外部的this
}
y()
}
var obj = {}
x.apply(obj)
console.log(obj,global.a)//{a:2} undefined
3 更加优雅的箭头函数的方法
example #31
2
3
4
5
6
7
8
9
10function x(){
this.a = 3//利用obj调用时候 this指向obj
var y = () =>{//不修改this this仍然指向obj
this.a = 2
}
y()
}
var obj = {a:0}
x.apply(obj)
console.log(obj)//{a:2}
这里箭头函数y中this是其词法作用域中的this，即x绑定的obj对象。箭头函数的绑定无法被更改，其this在函数定义的时候确定。
常用于回调函数中
example 41
2
3
4
5
6
7
8function foo(){
setTimeout(function(){
console.log(this.a)
},1000)
}
obj = {a:1}
foo.call(obj) // undefined
因为this绑定到全局对象上了
使用箭头函数进行改进
example 51
2
3
4
5
6
7
8function foo(){
setTimeout(()=>{
console.log(this.a)
},1000)
}
obj = {a:1}
foo.call(obj)//1
这里箭头函数记住了this为foo函数的this，所以调用了obj中的a属性