javascript & call & apply & bind & new All In One

Javascript call() & apply() vs bind()?

this

bind

call

apply

new

demo



const ZoomModule = () => {
    const zoomIO = () => {
        // this === e.target;
        console.log(`this =`, this);
        // undefined ???
        // console.log(`this.innerText =`, this.innerText, typeof(this.innerText));
        let text = this.innerText;
        if (text === "放大🔍") {
            this.innerHTML = "缩小🔎";
        } else {
            this.innerHTML = "放大🔍";
        }
        // this === e.target;
        // console.log(`this =`, this);
        // console.log(`this.parentNode =`, this.parentNode);
        // console.log(`this.parentNode.parentNode =`, this.parentNode.parentNode);
        // console.log(`this.parentNode.parentNode.nextElementSibling =`, this.parentNode.parentNode.nextElementSibling);
        // console.log(`this.parentNode.parentNode.parentNode =`, this.parentNode.parentNode.parentNode);
        this.parentNode.style.width = "1024px !important";
        this.parentNode.style.maxWidth = "1024px !important";
        this.parentNode.parentNode.style.width = "1024px !important";
        this.parentNode.parentNode.style.maxWidth = "1024px !important";
        this.parentNode.parentNode.nextElementSibling.style.width = "1024px !important";
        this.parentNode.parentNode.nextElementSibling.style.maxWidth = "1024px !important";
        this.parentNode.parentNode.parentNode.classList.toggle(`h5-full-screen`);
    };
    function zoomIcons() {
        console.log(`this =`, this);
        if (this.innerText === "放大🔍") {
            this.innerHTML = "缩小🔎";
        } else {
            this.innerHTML = "放大🔍";
        }
        this.parentNode.style.width = "1024px !important";
        this.parentNode.style.maxWidth = "1024px !important";
        this.parentNode.parentNode.style.width = "1024px !important";
        this.parentNode.parentNode.style.maxWidth = "1024px !important";
        this.parentNode.parentNode.nextElementSibling.style.width = "1024px !important";
        this.parentNode.parentNode.nextElementSibling.style.maxWidth = "1024px !important";
        this.parentNode.parentNode.parentNode.classList.toggle(`h5-full-screen`);
    }
    let zooms = [...document.querySelectorAll(`[data-zoom="otc-zoom"]`)];
    zooms.forEach(
        (zoom, i) => {
            if (zoom) {
                // if (existEvent) ? false : true;
                // zoom.addEventListener(`click`, zoomIO);
                // zoom.addEventListener(`click`, zoomIO.bind(zoom));
                // zoom.addEventListener(`click`, function (e) {
                //     zoomIO.bind(this)();
                //     zoomIO.call(zoom);
                //     zoomIO.call(this);
                //     zoomIO.apply(this);
                // });
                // old
                zoom.addEventListener(`click`, function (e) {
                    // func.bind(target)();
                    // zoomIcons.bind(zoom)(); // OK
                    zoomIcons.bind(e.target)();
                    // zoomIcons.call(zoom);
                    // zoomIcons.apply(zoom);
                    // zoomIcons.call(this);
                    // zoomIcons.apply(this);
                });
                // zoom.addEventListener(`click`, function (e) {
                //     console.log(`this =`, this);
                //     if (this.innerText === "放大🔍") {
                //         this.innerHTML = "缩小🔎";
                //     } else {
                //         this.innerHTML = "放大🔍";
                //     }
                //     this.parentNode.style.width = "1024px !important";
                //     this.parentNode.style.maxWidth = "1024px !important";
                //     this.parentNode.parentNode.style.width = "1024px !important";
                //     this.parentNode.parentNode.style.maxWidth = "1024px !important";
                //     this.parentNode.parentNode.nextElementSibling.style.width = "1024px !important";
                //     this.parentNode.parentNode.nextElementSibling.style.maxWidth = "1024px !important";
                //     this.parentNode.parentNode.parentNode.classList.toggle(`h5-full-screen`);
                // });
            }
        }
    );
};

https://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind