导航

首先复习下普通函数里的this指向:

1 function test(){
2     console.log(this)
3 }
4 test()

你会秒杀的毫无疑问的回答:window,针对普通函数谁调用了函数  函数里的this就指向谁test()等价于window.test(),所以是window

 

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5         console.log(this.name)
6     }
7 }
8 o.getname()

 

这个是普通函数,谁调用了函数  函数里的this就指向谁o.getname(),调用这个getname函数的是o这个对象,这个o对象下面有name:"innername",所以打印出的是 "innername"

怎么还不见ES6里的箭头函数呢?别急马上登场:看我变身

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:()=>{
5         console.log(this.name)
6     }
7 }
8 o.getname()

哇,箭头函数出来了,o.getname()执行后,因为箭头函数坐镇,我不敢轻易的说,因为调用getname()的是o对象,所以this指向o对象,哦NO,可是人家不是普通函数,人家是箭头函数,哪就猜相反的那个var name="outername",它会打印外面的那个name("outername"),恭喜你,答对了,原因下面会讲解。

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        return ()=>this.name
6         
7     }
8 }
9 console.log(o.getname()())

箭头函数继续出现,那么这个会打印出什么呢?不想猜的我直接敲出代码打印出来答案:"innername",为什么?箭头函数的this对象:就是定义时所在的对象,而不是使用时所在的对象,也就是根据外层(函数或者全局)作用域来决定this,再最后个例子一并总结.

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        setTimeout(()=>console.log(this.name),1000)
6         
7     }
8 }
9 o.getname()

待我先总结完后自己可以先去猜下没有给出答案的答案.

总结:

普通函数this指向谁调用了函数  函数里的this就指向谁

箭头函数的this指向就是定义时所在的对象,而不是使用时所在的对象,也就是根据外层(函数或者全局)作用域来决定this

调用的函数类型:

①箭头函数:this指向window

②普通函数:this指向调用这个普通函数的对象,可能这个普通函数里有箭头函数,否管它,即使这个普通函数里有箭头函数,这个箭头函数的this依旧是调用这个普通函数的对象

小结以上调用的函数是普通函数缺内嵌箭头函数的例子:

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        return ()=>this.name
6         
7     }
8 }
9 console.log(o.getname()())
1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        setTimeout(()=>console.log(this.name),1000)
6         
7     }
8 }
9 o.getname()

this对象的指向是可变的,但是在箭头函数中,它是固定的。

 1 function foo() {
 2   setTimeout(() => {
 3     console.log('id:', this.id);
 4   }, 100);
 5 }
 6 
 7 var id = 21;
 8 
 9 foo.call({ id: 42 });
10 // id: 42

上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42

 

希望此篇认清ES6箭头函数里的this指向,对你有用。