两个相同的对象使用相同的方法输出不同的结果

Question

所以这是我的代码，你可以看到你有一个名为“Obj”的对象，然后你有一个名为“myClass”的类，它创建的对象与“Obj”对象相同，但对象“newObj”中的run方法是从创建的myClass 输出不同的结果，这是没有意义的，因为两个对象 100% 相同    var x = 10; //global var    var Obj =  {        x:30 ,        run : () => {          console.log(this.x);      }    }    console.log(Obj)    Obj.run() //outputs 10    //a class which creates the same 'Obj' Object    class myClass {      constructor() {        this.x=30        this.run = () => {          console.log(this.x)        }      }    }    var newObj = new myClass()    console.log(newObj); //outputs an object which is as identical as the 'Obj' Object    newObj.run(); //outputs 30 instead of 10就是这样，提前谢谢

Answer 1

由于您在对象内使用箭头函数，因此this变为window，而不是Obj。但是在类中，run 函数在构造函数内部，this生成对象，而不是window. 如果您希望对象打印对象 x，则需要使用Obj.x.

var Obj =  {

    x:30 ,

    run : () => {

      console.log(Obj.x);

  }

}

即使两个对象在同一个作用域中，它们也不是在同一个作用域中创建的，它们的创建方式也不同。类是构造函数，对象不是。

如果您确实想使用this关键字，那么run : () =>您可以简单地将其替换为run ()。然后你可以使用this.x代替Obj.x。它有点像在类中（在其构造函数之外）定义一个函数。

var Obj =  {

    x:30 ,

    run () {

      console.log(this.x);

  }

}

Answer 2

假设这是在浏览器中，当你说var x = 10; // global var全局对象是浏览器的window，所以你说window.x = 10;

然后创建你的“目标文件”，并指定其X，x:30但你仍然在全球范围内，所以在那里当“运行”运行，this还是指window和window.x为10。

当您拥有myClass并构造其中之一newObj时，此时this现在指的是构造的对象，因此this.x指的是类成员x，即 30。

在控制台中查看时，它们可能看起来相同，但这是因为控制台两次都在同一范围内工作。尝试在您所做的每一行上放置一个断点，console.log并检查您遇到断点时的this和的值。this.x