JavaScript如何阻止this关键字在函数调用时改变指向？

嗨，这个问题在JS开发里太常见啦！你不需要“阻止”this改变指向——毕竟this的绑定规则就是如此：普通函数作为事件回调时，它会默认指向触发事件的DOM元素（也就是你的chose_button）。不过咱们有好几种靠谱的办法，能把外部上下文的this传给tryInputSong，下面给你一一拆解：

1. 提前保存外部this到变量 #

这是最经典的兼容性方案，所有JS环境都能跑：

// 先把外部上下文的this存到一个变量里，比如self/that
const self = this;
this.chose_button.on('click', function() {
  // 这里用self代替this，就能拿到外部的上下文了
  tryInputSong(self, self.link_input.val());
});

2. 用ES6箭头函数 #

箭头函数不会创建自己的this，它会直接继承外层作用域的this，代码更简洁清爽：

this.chose_button.on('click', () => {
  // 这里的this直接就是外部上下文的this，不用额外保存
  tryInputSong(this, this.link_input.val());
});

3. 用jQuery的$.proxy()方法 #

jQuery专门提供了这个工具函数，用来绑定函数的执行上下文：

this.chose_button.on('click', $.proxy(function() {
  // 这里的this已经被$.proxy绑定成外部的上下文了
  tryInputSong(this, this.link_input.val());
}, this));

4. 用原生JS的bind()方法 #

Function原型上的bind方法，可以永久绑定函数的this指向：

this.chose_button.on('click', function() {
  tryInputSong(this, this.link_input.val());
}.bind(this)); // 把回调函数的this绑定到外部上下文

这些方法本质都是控制回调函数执行时的this指向，选哪种看你的项目环境和个人习惯就行：如果项目支持ES6，箭头函数是最省心的；如果要兼容老浏览器，提前存变量或者用$.proxy更稳妥～

内容的提问来源于stack exchange，提问作者Kevin Bäckstäde