如何在JavaScript类方法的内部函数中正确绑定this？

为什么你用bind没生效？ #

bind() 方法的特性是不会修改原函数，它只会返回一个绑定了指定this的新函数。你当前的代码里，something.bind(this)只是生成了绑定后的新函数，但既没把它存下来，也没直接调用，之后执行的还是原来的something()，所以this指向还是默认的（非严格模式下是全局对象，严格模式下是undefined），自然拿不到Students实例的this。

错误代码的关键问题点：

something.bind(this); // 生成绑定函数但未使用
something(); // 调用的仍是未绑定的原函数

箭头函数为什么能正常工作？ #

箭头函数没有自己独立的this，它的this是继承自外层作用域的this。在document方法里，外层的this指向Students类的实例，所以箭头函数里的this自动指向这个实例，不需要额外做绑定操作。

正确的解决方法 #

1. 调用bind返回的新函数 #

把bind生成的新函数存到变量里再调用，或者直接链式调用：

document () {
  console.log(' this in method ', this);
  function something () {
    console.log('this inside a function', this);
  }
  // 方法1：保存后调用
  const boundFunc = something.bind(this);
  boundFunc();
  // 方法2：直接链式调用
  // something.bind(this)();
}

2. 使用箭头函数（你已验证的方法） #

将something定义为箭头函数，自动继承外层作用域的this：

document () {
  console.log(' this in method ', this);
  const something = () => {
    console.log('this inside a function', this);
  };
  something();
}

3. 提前保存this到变量 #

在document方法里把当前实例的this存到变量（比如self、that），在something函数里引用这个变量：

document () {
  console.log(' this in method ', this);
  const self = this;
  function something () {
    console.log('this inside a function', self);
  }
  something();
}

4. 用call/apply调用时指定this #

调用something的时候，用call或apply直接传入要绑定的this：

document () {
  console.log(' this in method ', this);
  function something () {
    console.log('this inside a function', this);
  }
  something.call(this);
  // 或者 something.apply(this);
}

内容的提问来源于stack exchange，提问作者Md. Rejoan