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. C#高级编程第11版 - 第五章 索引

    [1]5.1 泛型概述 1.通过泛型,你可以创建独立于特定类型(contained types)以外的方法和类,而不用为不同类型编写多份同样功能的代码,你只需要创建一个方法或者类. 2.泛型类使用泛型 ...

  2. Error Code: 2006 - MySQL 5.7 server has gone away

    使用 Navicat 执行 sql 脚本失败 出现 Error Code: 2006 - MySQL server has gone away 原因 当MySQL客户端或mysqld服务器收到大于ma ...

  3. 自动化接口差异测试-diffy 回归测试 charles rewrite 请求

    https://mp.weixin.qq.com/s/vIxbtQtRRqgYCrDy7XTcrA 自动化接口差异测试-diffy Boris 搜狗测试 2018-08-30   自动化接口差异测试- ...

  4. libevent之基于socket的bufferevent

    基于socket的bufferevent由一个socket的传输层和read/write buffer组成.区别于常规的event,当socket可读或者可写时会回调用户的callback,buffe ...

  5. linux查看log

    TOMCAT_PATH='/home/jyapp/apache-tomcat-7.0.59/'PID=`ps -ef |grep $TOMCAT_PATH | grep -v grep |awk '{ ...

  6. 【从零开始撸一个App】RecyclerView的使用

    目标 前段时间打造了一款简单易用功能全面的图片上传组件,现在就来将上传的图片以图片集的形式展现到App上.出于用户体验考虑,加载新图片采用[无限]滚动模式,Android平台上我们优选Recycler ...

  7. jvm系列五-java内存模型(2)

    原作者系列文章链接:并发编程系列博客传送门 前言# 在网上看了很多文章,也看了好几本书中关于JMM的介绍,我发现JMM确实是Java中比较难以理解的概念.网上很多文章中关于JMM的介绍要么是照搬了一些 ...

  8. [The Preliminary Contest for ICPC Asia Nanjing 2019] L-Digit sum

    题意 $S_{b}(n)$表示数字$n$在$b$进制下各位的和,对于给定的数$N$和$b$,求出$\sum_{n=1}^{N}S_{b}(n)$ $[ link ]$ 分析 题解上写的是签到题,这是个 ...

  9. 基于线段树的RMQ

    RMQ(Range Minimum/Maximum Query)区间最值查询,即给出长度为n的数组A,以及m组询问s.t(s<=t<=n),返回区间[s,t]中的最值. 基于线段树的方法实 ...

  10. 放苹果 POJ - 1664 递推

    把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. Input 第一行是测试数据的数目t(0 <= t < ...