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. Flutter--Flutter中Widget、App的生命周期

    前言 在App的开发过程中,我们通常都需要了解App以及各个页面的生命周期,方便我们在App进入前台时启动一些任务,在进入后台后暂停一些任务.同时,各个页面的生命周期也很重要,每个页面消失时要做一些内 ...

  2. Failed to start LSB: starts php-fpm

    跟nginx一样都是进程占用,记录下 [root@localhost pazzn]# systemctl status php-fpm.service ● php-fpm-72.service - L ...

  3. 使用Python的pandas模块、mplfinance模块、matplotlib模块绘制K线图

    目录 pandas模块.mplfinance模块和matplotlib模块介绍 pandas模块 mplfinance模块和matplotlib模块 安装mplfinance模块.pandas模块和m ...

  4. Python骚操作从列表推导和生成器表达式开始

    序列 序列是指一组数据,按存放类型分为容器序列与扁平序列,按能否被修改分为不可变序列与可变序列. 容器序列与扁平序列 容器序列存放的是对象的引用,包括list.tuple.collections.de ...

  5. SSRF-Vulnerable-Lab靶场训练

    参考文章 SSRF-Vulnerable-Lab tag: #SSRF Ref: 1.file_get_content.php 提取并显示指定文件内容的应用程序代码 在编程语言中,有一些函数可以获取本 ...

  6. Java面试（解答题一）

    1.简述下列问题 List,set,map的区别 解答:List,Set都是继承自Collection接口,Map则不是: List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素 ...

  7. brew更换国内源

    来源:清华大学开源软件镜像站(https://mirror.tuna.tsinghua.edu.cn/help/homebrew/) 替换现有上游 1 # brew 程序本身,Homebrew/Lin ...

  8. Spring Cloud与Docker——微服务架构概述

    Spring Cloud与Docker--微服务架构概述 单体应用架构概述 微服务概述 微服务的特性 微服务架构的优点 微服务面临的挑战 微服务的设计原则 单体应用架构概述 传统的服务发布都是采用单体 ...

  9. java校验导入的模板

    /** * 验证导入模板的正确性 InputStream inputStream = file.getInputStream(); */ @SuppressWarnings("depreca ...

  10. python--函数、参数、名称空间与作用域、匿名函数、内置函数、闭包

    python函数 函数定义 def welcome(): print('hello world!!') welcome() #函数调用 ...运行结果 hello world!! 函数定义和编写原则: ...