深入理解ES6箭头函数中的this

Posted 想旅游咯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解ES6箭头函数中的this相关的知识,希望对你有一定的参考价值。

简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。

 

1、何为定义时绑定

我们来看下面这个例子:

(1)

var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say();
//console.log输出的是22

一般的定义函数跟我们的理解是一样的,运行的时候决定this的指向,我们可以知道当运行obj.say()时候,this指向的是obj这个对象。

(2)

var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//输出的值为11

 

这样就非常奇怪了如果按照之前function定义应该输出的是22,而此时输出了11,那么如何解释ES6中箭头函数中的this是定义时的绑定呢?

所谓的定义时候绑定,就是this是继承自父执行上下文!!中的this,比如这里的箭头函数中的this.x,箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,因此输出的是11。

类似的还有:

(3)

var a=11
function test1(){
  this.a=22;
  let b=function(){
    console.log(this.a);
  };
  b();
}
var x=new test1(); //输出11

 

箭头函数情况:

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();//输出22

 

很奇怪对不对,我是这样理解的,ES6中定义的时候绑定this的具体含义,应该继承的是父执行上下文里面的this,切忌是父执行上下文!!!这样就很多箭头函数中的指向不明确就迎刃而解了。

注意:简单对象(非函数)是没有执行上下文的!

 

原文:https://zhuanlan.zhihu.com/p/26475137

 

如果 觉得文章不错,可以请博主喝一杯奶茶哦!!!

技术分享图片技术分享图片

以上是关于深入理解ES6箭头函数中的this的主要内容,如果未能解决你的问题,请参考以下文章

深入理解ES6箭头函数中的this

ES6知识盲点整理

ES6中的箭头函数

怎么理解这个箭头函数里的this指向

深入ES6中的class类

es6 箭头函数和function的区别