为什么Angular组件传入的回调函数内无法访问类属性？

问题原因 #

你遇到的this指向丢失问题是普通函数的特性导致的：普通函数的this指向由运行时的调用方决定，当你把this.success作为回调参数传给navigator.geolocation.getCurrentPosition时，success函数脱离了原组件的上下文环境，实际执行时this不再指向当前Angular组件实例，自然无法访问到绑定在组件实例上的db服务。

可行解决方法 #

你可以任选以下任意一种方案修复该问题：

• 方案1：用箭头函数定义回调
  箭头函数不会创建独立的this绑定，会继承外层作用域的this指向，直接修改success、error回调的定义方式即可：

// 将success改为箭头函数定义
success = (pos) => {
  function time() {
    ...
  }
  const crd = pos.coords;
  const lat = crd.latitude
  const long = crd.longitude

  const newCoordinates = {'lat': lat, 'long':long, 'time': time}
  this.db.addLocation(newCoordinates)
}
// error回调也需要做同样处理
error = (err) => {
  // 你的错误处理逻辑
}

• 方案2：传递回调时手动绑定this
  调用getCurrentPosition时用bind方法手动把回调的this绑定到当前组件实例：

logCoords(message, action) {
  navigator.geolocation.getCurrentPosition(
    this.success.bind(this), 
    this.error.bind(this), 
    this.options
  );
}

• 方案3：用箭头函数包裹回调逻辑
  传递参数时直接写匿名箭头函数包裹原有回调，让回调继承logCoords方法的this指向：

logCoords(message, action) {
  navigator.geolocation.getCurrentPosition(
    (pos) => this.success(pos), 
    (err) => this.error(err), 
    this.options
  );
}

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