JS - jak działa bind

Uczymy się, jak działa bind w JavaScript. Do dzieła.

Nasz HTML:

<p id="para">bla bla bla</p>
<button id="btn">Click me</button>

Ok, napiszmy coś prostego:

function clickMe(event){
     this.textContent = "bla bla";
}

window.addEventListener("DOMContentLoaded", function(){

    let btn = document.getElementById('btn');
    let para = document.getElementById('para');

    btn.addEventListener('click', clickMe);
  });

Kliknięcie guzika zamienia mu tekst na „bla bla”. Teraz z bind:

  function clickMe(event){
        this.textContent = "bla bla";
  }

  window.addEventListener("DOMContentLoaded", function(){

    let btn = document.getElementById('btn');
    let para = document.getElementById('para');

    btn.addEventListener('click', clickMe.bind(para));
  });

Teraz kliknięcie guzika zmienia tekst paragrafu…

function clickMe(text){
    this.textContent = text;
}

window.addEventListener("DOMContentLoaded", function(){

    let btn = document.getElementById('btn');
    let para = document.getElementById('para');

    btn.addEventListener('click', clickMe.bind(para, "new para text"));
});

A co jeżeli chcemy przekazać event? Wtedy bardziej sprawdzi się call:

function clickMe(event, text){
        console.log(event);
        this.textContent = text;
        event.target.setAttribute("disabled", true)
}

window.addEventListener("DOMContentLoaded", function(){

    let btn = document.getElementById('btn');
    let para = document.getElementById('para');

    btn.addEventListener('click', function(e){
        clickMe.call(para, e, "new para text" );
    });
  
});

Inne zastosowania bind widzieliśmy już w funkcjach partial, także powinniśmy już całkiem nieźle ogarniać call/apply/bind…

JS – jak działa bind