Javascript .bind() не работает в этом примере?

#javascript #bind

#javascript #привязать

Вопрос:

Вот код:

 var num = 0
window.onload = function() {
    var button = document.getElementById('button')
    button.onclick = function() {
        addNum.bind(this)
  }
}
function addNum() {
    num  
    this.textContent = `hit ${num} times`
}

addNum.apply(this) и addNum.call(this) оба работают.
Я в замешательстве. Кто-нибудь может помочь? Большое спасибо!

1. это действительно работает. Но bind() не вызывает функцию, она возвращает связанную функцию, которую вы не используете.

2. Вызов и применение вызывают функцию с другим контекстом, где bind возвращает вызываемую функцию. Вы можете немедленно вызвать функцию в JavaScript addNum.bind(this)();

Ответ №1:

bind создает новую функцию с привязанным this значением (и, возможно, аргументами). Если вы хотите выполнить функцию, вызовите ее с помощью () :

 button.onclick = function() {
  addNum.bind(this)();
}

Но это довольно глупо делать, когда .call выполняется то же самое, не требуя дополнительного () :

 button.onclick = function() {
  addNum.call(this);
}

Вызов .bind без выполнения созданной функции аналогичен:

 button.onclick = function() {
  const someFn = () => console.log('foo');
}

Здесь вы создали функцию с именем someFn , но никогда не вызывали ее. Если вы не вызовете результирующую функцию, она не будет использоваться.

Ответ №2:

Хотя вы можете видеть эффекты addNum.call() и addNum.apply() ( addNum() функция выполняется и что-то меняет на странице), addNum.bind(this) она не имеет никакого побочного эффекта.

Function.bind() не вызывает функции, используемые для ее вызова, она создает и возвращает другую функцию. Но ваш код просто игнорирует возвращаемое значение.

Ваш код должен быть примерно таким:

 window.onload = function() {
    var button = document.getElementById('button')
    var boundAddNum = addNum.bind(this);
    button.onclick = function() {
        boundAddNum();
  }
}

Ответ №3:

 var num = 0;
$(function() {
var button = document.getElementById('button');
button.onclick = function() {
var addNumX  = addNum.bind(this);
addNumX();
}
var addNum = function() {
num  ;
alert("OK");
this.textContent = 'hit ${num} times';
}
});