箭头函数和普通函数的代码片段和行为[重复]

Question

谁能帮我理解下面这个小 es6 程序的输出？

我知道箭头函数和普通函数的区别。

箭头函数在父级范围内运行。 Normal 函数在自己的范围内运行。

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)。

我在您的代码中添加了 cmets。

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 语法。它只是一种语法糖，但仍然有助于使您的代码更易于理解。