javascript - 与 addEventListener 绑定(bind)

Question

当在 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);

知道如何解决这个问题吗？

Answer 1

如果您想传递一个变量但保留 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));
  }
}