美文网首页
js的call() ,apply() 两种方法的区别和用法

js的call() ,apply() 两种方法的区别和用法

作者: MissSixty | 来源:发表于2018-11-03 09:52 被阅读0次

    作者:郭小北V5
    来源:CSDN
    原文:https://blog.csdn.net/xllily_11/article/details/51480723
    版权声明:本文为博主原创文章,转载请附上博文链接!

    只整理了格式,方便日后查看。

    背景:今天群里有 妹子(我就不指名道姓喽)说:百度了一圈calll()函数和apply()函数,感觉还是糊里糊涂
    然后群里热闹了,各种表情包,各种殷勤,你懂的!正好我前几天刚又重新翻了一遍 那本 600多页 的圣经书,我习惯时不时的去打下基础,只是为了用来装逼,给人讲解。。。。(我是有多蛋疼)!
    好了下面针对这个问题,我看好多小朋友 都不理解或者很迷惑,确实容易绕晕,毕竟是js独有的面向对象
    嘛,你要一下理解了 才是不正常。开始: 先说call 这个东西

    NO 1:我们先看一个简单的例子 1+1 = 2 你应该会吧

    function add(a,b)  
    {  
        alert(a+b);  
    }  
    function sub(a,b)  
    {  
        alert(a-b);  
    }  
     
    add.call(sub,1,1);  //  结果是?  ‘2’  还是   ‘0’  呢
    
    

    这里写代码片有人说是 1+1 =2; 有人说明显变成 1-1 = 0 了嘛!
    其实 add.call(sub,1,1); 等价于add(1,1) = 2 。。。。。
    那你这不是脑残吗?非要多此一举 弄个该死的call ,搞毛? 直接 add(1,1) 不行了吗?
    我不太懂了,add.call(sub)了,肯定是add直接sub里面的减法了呀,不然弄个call干嘛呀?

    好了,下面我们针对,群里的小伙伴提出的疑问一一解答:

    1. 那你这不是脑残吗?非要多此一举 弄个该死的call ,搞毛? 直接 add(1,1)
    
    答:其实 这个写法就是再举个例子 ,大家不要被迷惑 
        正常写这种加减法功能 谁会脑残这样多此一举? 嘿嘿 我偷笑!
    
    2. 我不太懂了,add.call(sub)了,肯定是add直接sub里面的减法了呀,不然弄个call干嘛呀?
    答:call的用法和意义:
    

    官方解释:
    call和apply可以用来重新定义函数的执行环境,也就是this的指向; call 和 apply 都是为了改变某个函数运行时的
    context 即上下文而存在的 换句话说,就是为了改变函数体内部 this 的指向。因为 JavaScript
    的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
    call():
    语法:call(Obj,[arg1][arg1])

    =======================================================
    我的白话文:

    call 就是中间牵线的,sub说 我需要 add 你的方法 和技能,
    比如:add会飞天 ,但sub 不会飞,现在sub想飞,但add不让它飞,所以sub就叫来了 call 这个东西, call直接把add爆菊
    加上一个 点 然后把sub抱到括号里,然后 sub 就直接把add 的“飞天”技能学会了,回到函数

    function add(a,b)  
    {  
        alert(a+b);  
    }  
    function sub(a,b)  
    {  
        alert(a-b);  
    }  
     
    add.call(sub,1,1); 
    //结果是 sub直接集成了 add 的“飞天”技能  sub alert里面 直接变成了 “a+b”!
    //主角还是sub,并不是add ,你要搞清楚!
    
    
    3. 什么场景下会用到call, apply 这种装逼的写法呢;
       答:看例子 
            function changeStyle(attr, value)
            {     
                this.style[attr] = value; 
             }  
            var box = document.getElementById('box');  
            window.changeStyle.call(box, "height", "200px");
    
    //在这里,changeStyle函数将被box对象调用,this指向了box对象
    //如果不用call的话,程序报错。因为window对象中没有style属性。
    //apply的用法:
    window.changeStyle.apply(box, [‘height’, ‘200px’]);
    //现在 window对象 “box” 这个div 的高 直接变成200px了,
    window.changeStyle.call(box, “height”, “200px”)
    //等价于 box.style.height=”200px”;看到这里应该明白了吧?你如果还没明白
    

    apply() 这个用法
    window.changeStyle.apply(box, [‘height’, ‘200px’]);

    看了这个写法 你应该明白了把,啊哈其实就是写法和形式不同而已,本质是一样的,apply() 是推进到数组里而已,也是为了改变this。
    这个,也是为了偷 add 的飞天技能哈!
    总结一句话:call() 就是用来让括号里的对象 来集成括号外的函数的属性!可以称之为继承!

    相关文章

      网友评论

          本文标题:js的call() ,apply() 两种方法的区别和用法

          本文链接:https://www.haomeiwen.com/subject/gkxkxqtx.html