Question

所以这是我的代码，您可以看到您有一个名为“ Obj”的对象一个名为“ myClass”的类，该类创建的对象与“ Obj”对象相同，但是从myClass创建的对象“ newObj”中的run方法输出不同的结果，这没有意义，因为两个对象都是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;

然后，您创建自己的“ Obj”并为其分配其 x，x:30，但是您仍处于全局上下文中，因此在其中，当“ run”运行时，{{1 }}仍指this，而window为10。

当您拥有window.x并将其中一个构造为myClass时，此时newObj指的是构造对象，因此{{1 }}指的是 classes 成员this，即30。

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

Answer 3

只需将运行功能更改为

run() {
  console.log(this.x);
}

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

两个具有相同方法的相同对象输出不同的结果

3 个答案: