箭头函数中this对象

153 阅读1分钟

箭头函数中this对象就是定义时所在的作用域,也就是说箭头函数本身没有this,内部的this就是外层代码块作用域中的this。

1、独立函数

var a = 0
var test = ()=> {
var a = 1
console.log(this.a)
}

test() //0
该箭头函数在全局环境中定义,即this指向window

2、对象的方法

var a = 0
var obj = {
a: 1,
foo: ()=> {
console.log(this.a)
}
}

obj.foo() //0

即:
var a = 0
var obj = new Object
obj.a = 1
obj.foo = ()=> {
console.log(this.a)
}
obj.foo()
如上所示,foo在全局中定义,所以this指向window,那么如何使this指向obj?

根据上一篇介绍,当函数作为对象的方法调用时this指向该对象,可以这样改写:

var a = 0
function foo(){
var func = () => {
console.log(this.a)
}
return func
}
var obj = {
a : 1,
foo:foo
}
obj.foo()() //1
func在foo调用时定义,此时的foo所在作用域为obj,因此this指向obj

3、构造函数,因箭头函数没有this,固不能用作构造函数,否则会报错

var foo = ()=> {
console.log(this)
}
var boo = new foo() //foo is not a constructor
4、bind/call

var a = 0

var func = ()=> {
console.log(this.a)
}

var obj = {
a: 1
}

func.call(obj) //0
如上:func定义在全局,因此打印0,同对象方法,我们可以通过如下改写,打印出1

var a = 0

var func = function() {
var boo = ()=> {
console.log(this.a)
}
return boo
}

var obj = {
a: 1
}

func.call(obj)() //1