javascript - 私有(private)方法内 "this"的上下文

Question

在 JavaScript 中使用私有(private)方法时，我遇到了一个有线问题。在私有(private)方法“this”引用中返回 Window 对象的句柄，而不是它包含的函数。

这是我引用的代码

function MyComponent(elem) {
  alert(this.constructor.name) //returns reference to MyComponent
  function privateMethod() {
    alert(this.constructor.name) 
    //returning Window Object, instead of privateMethod function reference
  }
  privateMethod()
}

new MyComponent(document.createElement('span'))

我通过在 MyComponent 函数中引入对“self”的引用成功解决了该错误。

function MyComponent(elem) {
  var self = this;
  alert(this.constructor.name) //returns reference to MyComponent
  function privateMethod() {
    alert(self.constructor.name) 
    //after passing the "self" reference its working
  }
  privateMethod()
}

new MyComponent(document.createElement('span'))

但仍然让我困惑的一件事是私有(private)方法中的“this”引用如何返回 Window 对象的句柄。

Answer 1

this 的引用实际上取决于函数调用的类型。您已使用函数形式或简单调用调用了privateMethod()，因此在privateMethod( ) 将引用全局对象。相反，如果您使用构造函数形式来调用 privateMethod() (即 new privateMethod()) this 将引用它所包含的函数。

查看 MDN 中的简单通话主题

所以

function MyComponent(elem) {
  alert(this.constructor.name) //returns reference to MyComponent
      function privateMethod() {
        alert(this.constructor.name)  //returns privateMethod function reference
    }
new privateMethod()
}

new MyComponent(document.createElement('span'))