Question

在JavaScript中使用私有方法时，遇到了有线问题。在私有方法内部，“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”的引用来解决这个bug。

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

但有一件事让我感到困惑的是私有方法中的“this”引用如何返回Window Object的句柄。

Answer 1

this的引用实际上取决于函数调用的类型。您已使用函数表单或简单调用调用privateMethod()，因此this中的privateMethod()将引用全局对象.Instead如果您使用构造函数表单来调用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'))

Answer 2

在这种情况下，您应该将this传递给您要调用的函数，例如privateMethod.call(this);：

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.call(this);
}

new MyComponent(document.createElement('span'))

私有方法中的“this”的上下文

2 个答案: