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

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