当在 JavaScript 中的事件监听器上使用 bind()
时,我无法再获取带有“this”的元素。
这是我的代码:
function callback(){
console.log(this.someVar);
// Works fine
console.log(this);
// No longer refers to the element, outputs "Object"
}
callback = callback.bind({someVar: 1234});
element.addEventListener('click', callback);
知道如何解决这个问题吗?
最佳答案
如果您想传递一个变量但保留 this
上下文,那么您可以使用柯里化(Currying)或部分应用:
Curry
您的函数必须接收一个值并返回另一个函数。这样您就可以执行以下操作:
function callback(num) {
return function() {
console.log(num);
console.log(this.id);
}
}
var number = 1;
document.getElementById("hello").addEventListener("click", callback(number));
//change the variable
number = 2;
document.getElementById("world").addEventListener("click", callback(number));
//change the variable again
number = 3;
<button id="hello">Hello</button>
<button id="world">World</button>
Partial application
同样的想法,但不是让你的回调返回一个新函数,它只需要一个参数并正常工作,你需要另一个函数来执行部分应用程序:
function callback(num) {
console.log(num);
console.log(this.id);
}
var number = 1;
document.getElementById("hello").addEventListener("click", partial(callback, number));
//change the variable
number = 2;
document.getElementById("world").addEventListener("click", partial(callback, number));
//change the variable again
number = 3;
function partial(fn, arg) {
return function() {
return fn.call(this, arg);
}
}
<button id="hello">Hello</button>
<button id="world">World</button>
部分应用程序函数可以泛化为处理任何数量或参数
在 ES6 中:
function partial(fn, ...args) {
return function(...otherArgs) {
return fn.apply(this, [...args, ...otherArgs]);
}
}
在 ES5 中:
function partial(fn) {
var args = [].prototype.slice.call(arguments, 1);
return function() {
var otherArgs = [].[].prototype.slice.call(arguments);
return fn.apply(this, args.concat(otherArgs));
}
}
关于javascript - 与 addEventListener 绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58675228/