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 发布文章使用：只允许注册用户才可以访问！

javascript & call & apply & bind & new的更多相关文章

  1. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  2. (转)深入浅出 妙用Javascript中apply、call、bind

    原文连接 深入浅出 妙用Javascript中apply.call.bind 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且 ...

  3. javascript中apply、call和bind的区别，容量理解，值得转！

    a)  javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b)  深入浅出 妙用Javascrip ...

  4. 解析JavaScript中apply和call以及bind

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...

  5. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  6. JavaScript学习(2)call&apply&bind&eval用法

    javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...

  7. 深入浅出：了解JavaScript中的call,apply,bind的差别

     在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾:         1.this对象的涵义就是指向当前对象中的属性和方法.       2.this指向的可变 ...

  8. JavaScript中的bind,call和apply函数的用法和区别

    一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...

  9. 一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别

    JavaScript中apply.call.bind三者的用法及区别 引言 正文 一.apply.call.bind的共同用法 二. apply 三. call 四. bind 五.其他应用场景 六. ...

随机推荐

  1. IDEA 2019 Unable to get current time from Google's servers 解决

    取消android support即可

  2. 让绝对定位的div居中

    最近看到一个问题就是让绝对定位的div居中,在尝试了top:50%:left:50%:后发现,居中是有问题的并不是想象中的样子 需要再加两句margin-top:-盒子高度的一般px  margin- ...

  3. 类型检查和鸭子类型 Duck typing in computer programming is an application of the duck test 鸭子测试 鸭子类型 指示编译器将类的类型检查安排在运行时而不是编译时 type checking can be specified to occur at run time rather than compile time.

    Go所提供的面向对象功能十分简洁,但却兼具了类型检查和鸭子类型两者的有点,这是何等优秀的设计啊! Duck typing in computer programming is an applicati ...

  4. Codeforces 1437F Emotional Fishermen(思维，dp)

    题意 给出数列\(a_i\),求排列\(p_i\)的数量满足 \[\frac{a_{p_i}}{max_{j=1}^{i-1}a_{p_j}} \notin (\frac{1}{2},2) \] 思路 ...

  5. Nginx配置WebSocket反向代理(Tomcat+Nginx)

    @toc WebSocket 和HTTP协议不同,但是WebSocket中的握手和HTTP中的握手兼容,它使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket.这使得WebSo ...

  6. Spark 将DataFrame所有的列类型改为double

    Spark 将DataFrame所有的列类型改为double 1.单列转化方法 2.循环转变 3.通过:_* 1.单列转化方法 import org.apache.spark.sql.types._ ...

  7. （26）Vim 2

    1.Vim 查找文本 /abc 从光标所在位置向前查找字符串 abc /^abc 查找以 abc 为行首的行 /abc$ 查找以 abc 为行尾的行 ?abc 从光标所在为主向后查找字符串 abc n ...

  8. 调用个别f5 负载端口为80的vs时，返回值为空的问题

    现状: vs负载端口为80并添加XFF,pool包含2个member,member的monitor端口为80&9000. 故障现象: 应用同事描述说再完全复制了一个member并添加到pool ...

  9. 学生信息管理系统总结——student数据库中表关系分析

    说到关系,那就不得不提两个东西: 1.E-R图,也称实体-联系图(Entity Relationship Diagram),提供了表示实体类型.属性和联系的方法,用来描述现实世界的概念模型 2.关系模 ...

  10. 织梦dedecms自由列表的＂不使用目录默认主页＂错误修正

    站长用织梦做站时常常发现织梦自由列表有个致命的问题: 即修改"不使用目录默认主页"就永远不会自己勾选啦 打开这个文件 makehtml_freelist_action.php 搜索 ...