Question

我有一个JavaScript类（MyClass），它公开了两个公共函数（funA和funB），如下所示：

var MyClass = function(){
  this.funA = function(){
    console.log("function A");
    this.funB();
  };
  this.funB = function(){
    console.log("function B");
  };
};

var myObj = new MyClass();

请注意funA如何使用“ this”关键字调用funB。

以下作品：

myObj.funA();

但这不是：

var anonymousFun = function(fn){
  fn();
}
anonymousFun(myObj.funA);

原因是当funA使用“ this”调用funB时，“ this”设置为全局上下文（而不是MyClass），并且funB在全局级别不存在。错误是：

Uncaught TypeError: this.funB is not a function

我试图避免出现此问题的最简单解决方案是在MyClass中使用变量“ that”并将其初始化为“ this”。然后，在funA内使用that.funB代替this.funB：

var MyClass = function(){
  var that = this;
  this.funA = function(){
    console.log("function A");
    that.funB();
  };
  this.funB = function(){
    console.log("function B");
  };
};

这是正确的方法吗？有更好的解决方案吗？

Answer 1

您可以只使用箭头功能。之所以成为窗口对象，是因为关闭不同。如果在定义函数时使用箭头函数，则会在整个类中保留相同的闭包。

var MyClass = function(){
  this.funA = ()=>{
    console.log("function A");
    this.funB();
  };
  this.funB =()=>{
    console.log("function B");
  };
};

此代码符合预期

Answer 2

使用在构造函数范围内可访问的标识符定义函数，然后将其添加到Object的末尾。 this可能会根据上下文而变化，但是闭包是闭包，并且对函数可访问的变量的引用不会更改。

var MyClass = function(){
  function funA(){ // no `this`
    console.log("function A");
    funB(); // no `this`
  };
  function funB(){ // no `this`
    console.log("function B");
  };

  Object.assign(this, { funA, funB });
};

var instance = new MyClass();

instance.funA();
instance.funB();

var lonely = instance.funA;

lonely(); // no longer attached to an object, but can still access funB();

Answer 3

如果要使用Babel编译JS，则可以使用类属性初始化器语法来创建绑定到this的函数：

class MyClass {
  funA = () => {
    console.log('function A')
    this.funB()
  }

  funB = () => {
    console.log('function B')
  }
}

Answer 4

可以使用Function.bind方法附加一个对象，该对象在调用函数时将用作“ this”。

anonymousFun(myObj.funA.bind(myObj));

Answer 5

它更像是一个基于意见的问题。但是，这可能对您的开发有所帮助。您可以使用绑定或调用。这是一个带有呼叫的示例：

var MyClass = function(){
  this.funA = function(){
    console.log("function A");
    this.funB();
  };
  this.funB = function(){
    console.log("function B");
  };
};

var myObj = new MyClass();

var anonymousFun = function(fn){
  fn.call(myObj)
}
anonymousFun(myObj.funA)

好一点：

var anonymousFun = function(context, fn){
  fn.call(context)
}
anonymousFun(myObj, myObj.funA)

如何将类的所有方法绑定到javascript中的“ this”变量

5 个答案: