在 for 循环中将 Bind 添加到原版 Javascript 中的原型对象
Adding Bind to a prototyped object in vanilla Javascript in a for loop
我有一个Javascript类,它有一个原型方法,它使用for循环将事件侦听器添加到一组对象中并调用类中的另一个方法。
为了能够访问类中的另一个方法,我必须在事件侦听器中绑定函数,该函数使我能够访问另一个类方法。 但是,我总是在 for 循环中获得最大值,所以我在匿名函数中返回一个函数,但现在我无法让绑定函数工作并找到另一个类方法。
ToDoList.prototype = {
addListener : function(){
//inside for loop
for(var i = 0; i < ToDoList.counter; i++){
el.addEventListener("click", ((function(value){
return function(){
this.remove(value); //trying to call this method
};
})(i)).bind(this)
);
}
}
remove : function(index){
//do some stuff if you can get to me
}
}
上面的代码仅适用于 for 循环的最后一个值。 有什么方法可以让代码处理 for 循环中的所有值。
bind
函数返回一个新函数,this
设置为 bind
的第一个参数,所有后续参数都作为参数传递。
如果使用bind
,则不需要闭包:
ToDoList.prototype = {
addListener: function() {
for (var i = 0; i < ToDoList.counter; i++) {
el.addEventListener("click", function(value) {
// `this` is the same as outer `this`
// `value` is `i`
this.remove(value);
}.bind(this, i));
}
},
remove: function(index) {
}
}
具有 ES2015 功能:
ToDoList.prototype = {
addListener() {
for (let i = 0; i < ToDoList.counter; i++) {
el.addEventListener("click", () => this.remove(i));
}
}
}
整洁吧?
let
将使循环的每次迭代都有自己的i
,而不是整个函数的共享。这就解决了i
等于ToDoList.counter
的问题。
箭头函数=>
是自动绑定的,所以你不用担心this
,它会自动正确绑定到外部this
。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- javascript结合了数组和字典
- 这是什么 ==- javascript 运算符
- 从javascript创建一个列表
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Javascript:selenium Web驱动程序isDisplayed()不工作
- 当鼠标空闲时强制 Chrome 光标更新原版 JavaScript
- 使用原版 JavaScript 的自定义可调整大小的弹性框视图在鼠标按下时跳转
- 修复原版 Javascript 轮播的右键
- 在 for 循环中将 Bind 添加到原版 Javascript 中的原型对象
- 命名空间原版 JavaScript 事件,如 jQuery 中的事件