回调函数中无法使用this问题求助：Util.delete_selection方法调用异常

我来帮你搞定这个this指向的坑，这在JS里是个非常常见的问题，咱们一步步说清楚：

问题根源 #

你用普通函数作为回调传入util.delete_selection时，这个函数的this指向已经不再是原来的组件实例了——因为当delete_selection内部调用这个回调时，严格模式下默认的this会变成undefined，自然没法通过this.$emit触发组件事件。

靠谱的解决方案 #

1. 正确使用箭头函数（最推荐）

箭头函数不会绑定自己的this，它会直接继承外层作用域的this。你之前说尝试箭头函数但问题未明确，大概率是写法没到位？直接把回调改成箭头函数试试：

Util.delete_selection(
  this, 
  this.delete_url_function, 
  this.selection, 
  (bool) => { 
    debugger; 
    this.$emit('callback') // 这里的this会正确指向组件实例
    console.log('cb') 
  }
)

这个写法下，箭头函数里的this就是调用Util.delete_selection时的那个组件实例，应该能正常触发$emit。

2. 用bind()绑定this

如果一定要用普通函数，可以通过bind()把当前的this绑定到回调函数上，强制它的指向不改变：

Util.delete_selection(
  this, 
  this.delete_url_function, 
  this.selection, 
  function (bool) { 
    debugger; 
    this.$emit('callback') 
    console.log('cb') 
  }.bind(this) // 绑定当前组件实例到回调函数
)

这样不管这个函数在哪里被调用，this都会固定指向你绑定的组件实例。

3. 提前保存this的引用

还有个兼容性拉满的传统办法，在调用delete_selection之前，把当前的this存到一个变量里（比如self或者that），然后在回调里用这个变量代替this：

const self = this; // 保存当前组件实例的引用
Util.delete_selection(
  this, 
  this.delete_url_function, 
  this.selection, 
  function (bool) { 
    debugger; 
    self.$emit('callback') // 用self代替this
    console.log('cb') 
  }
)

这个方法在老版本JS环境里也能稳定运行。

为什么箭头函数可能没生效？ #

如果你之前试了箭头函数还是有问题，检查下是不是箭头函数嵌套在了另一个普通函数内部？内层的普通函数还是会丢失this指向，这时候内层也要换成箭头函数才行。

内容的提问来源于stack exchange，提问作者sof-03