Question

我在代码下练习代码参考：Link

   let obj = {
    name : "Cj",   
    sayLater : function(){
        setTimeout(function(){
          console.log("sayLater :> "+this.name); 
        },3000)
    },
    sayNow : function(){
      console.log("sayNow :> "+this.name); 
    },
    sayLaterFA : function(){
      setTimeout(() => console.log("sayLaterFA :> "+this.name) ,3000)
    },
    sayNowFA : () => console.log("sayNowFA :> "+this.name),
    sayLaterPureFatArrow : () => { setTimeout(() => console.log("sayLaterPureFatArrow :> "+this.name),4000) },
    sayNowPureFatArrow : () => { console.log("sayNowPureFatArrow :> "+this.name) }
  }



 obj.sayLater();             //Output : sayLater :> undefined
  obj.sayNow();               //Output : sayNow :> Cj
  obj.sayLaterFA();           //Output : sayLaterFA :> Cj 
  obj.sayNowFA();             //Output : sayNowFA :> Cj
  obj.sayLaterPureFatArrow(); //Output : sayLaterPureFatArrow :> undefined 
  obj.sayNowPureFatArrow();   //Output : sayNowPureFatArrow :> undefined

任何人都可以解释为什么我的输出未定义但我使用胖箭头功能

Answer 1

这些箭头函数的this值是创建函数的上下文中this的值。那是不你正在构建的对象;这是对象初始化代码存在的任何this。

换句话说，在里面

let obj = {
  // whatever
};

this的值与初始化之前或之后的值不同。该语言不提供在初始化程序块中引用“正在构造”对象的方法。

Answer 2

箭头函数中没有this引用箭头函数的对象，

箭头函数表达式的语法短于函数表达式，并且没有自己的[...]

这将始终引用您正在呼叫的对象，即浏览器中的window

Answer 3

胖箭头捕获周围的this值。对于文件顶层对象文字中的表达式，围绕this值为window（非严格模式）或undefined（严格）模式）。

所以你看到的行为是：

sayLater：undefined因为内部函数不使用this - 捕获机制（因此this“丢失”并返回window / { {1}}）
undefined：sayNow因为正常Cj语义（this是“方法调用中this左侧的内容”< / LI>
. - 与sayLaterFA相同，只是内部函数捕获了外部函数的“正确”sayNow
this - 名称不佳，因为它与sayNowFA
sayNow / sayLaterPureFatArrow - 两次捕获sayLaterPureFatArrow为window

Answer 4

undefiend显示为输出，因为this指的是setTimeout()函数中name不可用的范围，因此undefined < / p>

我通常会按照

的方式做点什么

ayLater : function(){ let instance = this;
    setTimeout(function(){
      console.log("sayLater :> "+instance.name); 
    },3000)
},

希望这个答案：）

打字稿：胖箭＆amp;这个范围关系

4 个答案: