严格模式下如何使用this？Angular服务中this未定义问题求助

这个场景我太熟了！严格模式下this变成undefined，根本原因是函数调用的上下文丢失了——比如你可能把包含这段代码的方法当作回调传给了异步操作（比如HTTP请求、setTimeout），或者没有正确绑定this，导致执行时this不再指向ActionService的实例。

严格模式下的这个行为其实是规范要求的：非严格模式里如果函数没有明确上下文，this会默认指向全局对象（浏览器里是window），但严格模式会直接设为undefined，避免你误操作全局变量。所以我们不是要“绕过”严格模式，而是要正确处理this的绑定，下面给你几个实用的解决方案：

方案1：提前保存this的引用 #

最直观的办法就是在方法开头把this存到一个变量里（比如self或者that），之后用这个变量代替this调用方法：

'use strict';

class ActionService {
  handleAction(action, parameters) {
    // 提前保存服务实例的引用
    const self = this;
    
    // 假设这里有个异步操作，比如HTTP请求回调
    someAsyncOperation(() => {
      if (angular.isFunction(self[action.name])) { 
        self[action.name](parameters); 
      } else { 
        doSpecialAction(action, parameters); 
      }
    });
  }
}

方案2：用箭头函数保留上下文 #

箭头函数不会创建自己的this，它会继承外层作用域的this。如果你的代码是在回调里执行的，直接用箭头函数包裹逻辑就能解决：

'use strict';

class ActionService {
  handleAction(action, parameters) {
    // 用箭头函数作为回调，this会指向ActionService实例
    someAsyncOperation(() => {
      if (angular.isFunction(this[action.name])) { 
        this[action.name](parameters); 
      } else { 
        doSpecialAction(action, parameters); 
      }
    });
  }
}

如果是在定义服务方法的时候，也可以直接用箭头函数定义方法，这样方法的this会永远绑定到服务实例：

'use strict';

class ActionService {
  // 用箭头函数定义方法，this自动绑定到实例
  handleAction = (action, parameters) => {
    if (angular.isFunction(this[action.name])) { 
      this[action.name](parameters); 
    } else { 
      doSpecialAction(action, parameters); 
    }
  }
}

方案3：用bind()显式绑定this #

你可以用Function.prototype.bind()方法，把方法的this强制绑定到服务实例上。两种用法：

1. 在构造函数里绑定所有方法 #

'use strict';

class ActionService {
  constructor() {
    // 把方法绑定到当前实例，确保任何调用场景下this都指向实例
    this.handleAction = this.handleAction.bind(this);
  }

  handleAction(action, parameters) {
    if (angular.isFunction(this[action.name])) { 
      this[action.name](parameters); 
    } else { 
      doSpecialAction(action, parameters); 
    }
  }
}

2. 调用方法时临时绑定 #

'use strict';

class ActionService {
  handleAction(action, parameters) {
    // 先把目标方法绑定到当前实例，再调用
    const targetMethod = this[action.name];
    if (angular.isFunction(targetMethod)) { 
      targetMethod.bind(this)(parameters); 
    } else { 
      doSpecialAction(action, parameters); 
    }
  }
}

总结一下：严格模式的限制是为了代码更安全，我们不需要“绕过”它，只要通过保存引用、箭头函数或者bind()方法，确保this始终指向ActionService的实例就可以啦。

内容的提问来源于stack exchange，提问作者user5421954