JS – Polyfill vol. 1

Piszemy własną funkcję myBind odtwarzającą działanie wbudowanej w JS funkcji bind. Do dzieła.

Na początek HTML:

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

Teraz JS:

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

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

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

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

Kliknięcie guzika – zmienia tekst paragrafu, który jest pod this.

Teraz to samo, ale z argumentową funkcją:

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

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

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

btn.addEventListener('click', changeTextContent.bind(para, "new txt"));
   
});

Ok, piszemy polyfill:

Function.prototype.myBind = function(refObj, ...args){
    const fn = this;
    return function(){
        fn.call(refObj, args);
    }
}

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

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

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

    btn.addEventListener('click', changeTextContent.myBind(para, "new txt"));
   
});