JavaScript中如何在方法的内部函数中设置this上下文指向？

结论：普通函数内的this是执行上下文的内置只读属性，没法直接通过赋值修改，直接写this = xxx会直接抛语法错误。

this的默认指向由函数调用时的绑定规则决定，如果你不想在传入回调的位置写bind/call/apply做绑定，完全可以在函数定义阶段就把this指向固定住，不需要调用方做额外处理，常用的实现方案有三种：

• 用箭头函数继承外层作用域的this
  箭头函数没有自己的this绑定，它的this永远取自定义位置外层作用域的this，不会因为调用方式变化而改变。如果回调需要指向定义时所在的类实例，这是最省事的写法：

  class Demo {
    constructor() {
      this.val = 0;
      // 箭头函数作为实例属性，定义时就把this固定为当前Demo实例
      this.CallBack = () => {
        this.setValue(123);
        this.somekindofMethods();
      }
    }
    setValue(v) { this.val = v }
    somekindofMethods() { console.log(this.val) }
  }
  // 外部传这个回调的时候不需要做任何绑定，内部this永远是Demo实例
  

• 函数内部缓存目标上下文的引用
  如果需要指向的目标对象是明确的，直接在函数作用域里存一份这个对象的引用，内部逻辑全用这个缓存变量代替this就行，和调用时的this绑定完全没关系：

  // 提前定义好你期望作为上下文的对象
  const targetCtx = {
    setValue(...args) { /* 对应逻辑 */ },
    somekindofMethods(...args) { /* 对应逻辑 */ }
  };
  
  function CallBack(){
    // 直接用缓存的上下文，不管调用时this被改成啥都不影响
    const ctx = targetCtx;
    ctx.setValue('whatever');
    ctx.somekindofMethods('whatever');
  }
  // 这个回调随便传到哪用，内部逻辑都能正常访问targetCtx
  

• 函数定义阶段自行完成bind绑定
  bind逻辑不需要写在调用回调的地方，你完全可以在定义函数的时候就返回已经绑好目标this的函数，对外暴露的回调本身就是绑定完成的状态，调用方直接传就行：

  function createCallback(targetCtx) {
    function callback() {
      this.setValue('whatever');
      this.somekindofMethods('whatever');
    }
    // 函数内部自己做bind，返回的函数this已经固定
    return callback.bind(targetCtx);
  }
  // 生成的回调可以直接传入任意方法，不需要外部再做绑定
  const CallBack = createCallback(targetCtx);
  

内容的提问来源于stack exchange，提问作者Jeong Seong Jin