Question

有人可以帮助我理解下面的小型es6程序的输出吗？

我知道箭头功能和普通功能之间的区别。

箭头功能在父级范围内运行。普通功能在其自己的范围内运行。

PFB使我感到困惑的程序。

function Temp(){
  this.x =99;
  y =88;
  var z =77;

  setTimeout(function(){console.log(this.y+"::",this.x,"--",this.z),5});
  setTimeout(()=>{console.log(this.y+"||",this.x,"--",this.z),5});

  doit(function (){ console.log(this.y+":",this.x,"_",this.z);})
  doit(()=>{console.log(this.y+"|",this.x,"-",this.z);});

  function doit(task){
    this.i =0;
    task();
  }
}

new Temp();

输出

88:: undefined --undefined 
undefined|| 99 --undefined 
88: undefined -undefined 
undefined| 99-undefined

es6游乐场

es6console link 想知道变量声明和函数（箭头/正常）之间的关联。

Answer 1

如果您未声明变量（例如，未使用this.y或const，let和var中的一个），它将附加到全局范围（对于window。

调用匿名函数时，它使用全局范围（window）。

我在您的代码上添加了注释。

function Temp() {
  this.x = 99; // local scope
  y = 88; // global scope (attached on window as it is not declared)
  // this.y is never

  setTimeout(function() { // Scope is window/global
    console.log('log1', this.y + ":::", this.x)
  }, 5);

  setTimeout(() => { // Scope is Temp
    console.log('log2', this.y + "||", this.x)
  }, 5);

  doit(function() { // Because it is an anonymous function
                    // the scope is now that of window
    console.log('log3', this.y + ":", this.x);
  })
  doit(() => { // Arrow function: the scope of Temp
    console.log('log4', this.y + "|", this.x);
  });

  function doit(task) {
    this.i = 0;
    task();
  }
}

new Temp();

因此回顾一下：始终使用const或let声明变量。另外，为了更好地理解，请使用新的class语法。这只是一个语法糖，但是仍然有助于使您的代码更易于理解。

代码段以及Arrow函数和Normal函数的行为

1 个答案: