javascript - 如何摆脱javascript中的绑定(bind)情况

Question

我尝试使用以下代码在按钮数组上注册回调。但我似乎无法理解如何绑定(bind)回调中需要的字符串。任何建议将不胜感激!

for (var i = 0; i < this.car_types.length; ++i) {

    this.select_car_buttons.push($("#button_select_car_" +
                this.car_types[i].car_type));

    this.select_car_buttons[this.select_car_buttons.length - 1]
        .click(function() {
            console.log(this.car_types[i].car_type);
    }.bind(this));
}

不知何故，this 对象是按钮本身，而不是在其范围内调用函数的对象。

编辑:似乎确实正确地传入了 this 对象。问题是变量 i 没有超出范围，而是通过引用而不是值来捕获。我应该如何解决这个问题？

作为一种语言，JavaScript 似乎也存在很多这样的问题(考虑到传统 C 系列语言(如 C 和 C++)所采用的语义是正确的，至少可以归类为一个问题)，是否有一些我能读到的文章警告我不要出现这些类型的问题？

ANOTHER EDIT :在尝试使用值捕获的 i 值进行闭包时，我尝试了以下代码

this.select_car_buttons[this.select_car_buttons.length - 1]
   .click((function(scoped_i) {
      return function() {
            console.log(this.car_types[scoped_i].car_type);
      }.bind(this);                               
}(i)));  

但我在 Safari 中收到以下错误

TypeError: undefined is not an object (evaluating 'scoped_i')

编辑:相同的代码在 Firefox 和 Chrome 中有效，但在 Safari 中无效!

Answer 1

这是一个范围问题。对于现代浏览器(支持 ES6)，您只需在 for 循环中将 var 更改为 let 即可得到修复。

for (let i = 0; i < this.car_types.length; ++i)

---

引用MDN docs

The let statement declares a block scope local variable, optionally initializing it to a value.

---

要获得更多全局支持(非 ES6 支持)，请使用立即调用的函数为变量创建额外范围(您将其作为参数传递)

this.select_car_buttons[this.select_car_buttons.length - 1]
  .click((function(scoped_i) { // IIF starts here, the new variable is called scoped_i for verbosity
    return function() { // your original function code goes here
      console.log(this.car_types[scoped_i].car_type); // use the newly scoped variable
    }.bind(this);
  }.bind(this)(i))); // end and execute the IIF while passing the i variable to it