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. 【CentOS7】Apache发布静态网页-超简单

    目前能够提供Web网络服务的程序有 IIS. Nginx和 Apache等.其中,IIS (Internet Information Services,互联网信息服务)是 Windows系统中默认的 ...

  2. Windows和Linux下apache-artemis-2.10.0安装配置

     window下安装配置 一.官网下载 http://activemq.apache.org/artemis/download.html 二.百度网盘下载 链接:https://pan.baidu.c ...

  3. Bitter.Core系列八：Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore 之 事务

    Bitter.Core 编写事务相当简单,Bitter.Core 尽可能的将代码编写量降为最低,例外一方方面保证客户主观能控制代码.Bitter.Core 事务提交,支持Builkcopy事务,原生事 ...

  4. 权限过大 ssh协议通过pem文件登陆

    root@oneweek:~# ssh -i uat.pem root@110.5.15.6@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  5. Python基础(变量、字符编码、数据类型)

    变量 变量名由字母.数字(不能为首字符).下划线组成,不能使用关键字 以下关键字不能声明为变量名 ['and', 'as', 'assert', 'break', 'class', 'continue ...

  6. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...

  7. Java IO--字节流与字符流OutputStream/InputStream/Writer/Reader

    流的概念 程序中的输入输出都是以流的形式保存的,流中保存的实际上全都是字节文件. 字节流与字符流 内容操作就四个类:OutputStream.InputStream.Writer.Reader 字节流 ...

  8. Linux常用命令详解（第一章）（ls、man、pwd、cd、mkdir、echo、touch、cp、mv、rm、rmdir、）

    本章命令(共11个): 1 2 3 4 5 6 ls man pwd cd mkdir echo touch cp mv rm rmdir 1. " ls " 作用:列出指定目录下 ...

  9. YOLOv1论文解读

    摘要 我们提出一种新的目标检测算法--YOLO.以前有关目标检测的研究将检测转化成分类器来执行.然而,我们将目标检测框架化为空间分隔的边界框及相关的类概率的回归问题.在一次评估中,单个神经网络直接从整 ...

  10. nginx教程<二>(高可用)

    1.nginx集群 对于访问量较大的网站来说,随着流量的增加单台服务器已经无法处理所有的请求,这时候需要多台服务器对大量的请求进行分流处理,即负载均衡. 而如果实现负载均衡,必须在网站的入口部署服务器 ...