javascript - 如何在没有构造函数的情况下为 "this"赋值

Question

我认为这似乎很简单，但我对调用、应用、绑定(bind)感到困惑。等等

我有一个事件监听器

red.addEventListener("click", function() {
    j = 0;
    userTurn();
})

我传入函数 userTurn()

function userTurn() {
    if (this === colors[pattern[j]]) {
        console.log("correct")
        j++;
    }
    else {
        console.log('wrong');
    }

我想要的是将 this 关键字应用于 eventListener 所在的元素，但它默认为 window 对象。我很确定这是因为我没有将其绑定(bind)到 eventListener 但我无法弄清楚......

感谢您的帮助!

Answer 1

在没有调用上下文(例如您的)的情况下调用的函数

userTurn();

默认情况下，

会将其 this 设置为全局(窗口)对象。要在指定自定义调用上下文时调用函数，请使用 .call，其第一个参数是您要设置的自定义 this 值:

red.addEventListener("click", function() {
    j = 0;
    userTurn.call(this);
})

red.addEventListener("click", function() {
  j = 0;
  userTurn.call(this);
})

function userTurn() {
  console.log(this.textContent);
}

<div id="red">red</div>