javascript & call & apply & bind & new

javascript & call & apply & bind & new

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

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

https://medium.com/@homicidalgecko/javascript-call-vs-apply-vs-bind-61447bc5e989

https://codeplanet.io/javascript-apply-vs-call-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

call & apply

call 和 apply 的区别是什么，哪个性能更好一些

1. 使用方式不同
2. 性能差异可忽略

Call ( F, V [ , argumentsList ] )

https://tc39.es/ecma262/#sec-call

https://tc39.es/ecma262/#sec-function.prototype.call

https://tc39.es/ecma262/#sec-function.prototype.apply

CreateListFromArrayLike

https://www.zhihu.com/question/61088667/answer/184598599

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---