js的call() ，apply() 两种方法的区别和用法，最白话文的解释，让枯燥滚粗！

Posted 2022-08-01 小北哥哥和北妈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的call() ，apply() 两种方法的区别和用法，最白话文的解释，让枯燥滚粗！相关的知识，希望对你有一定的参考价值。

背景：今天群里有妹子(我就不指名道姓喽)说：百度了一圈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
2
3
4
5
6
7
8
9
10
11
   1
2
3
4
5
6
7
8
9
10
11

这里写代码片有人说是 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干嘛呀？

什么场景下会用到call， apply 这种装逼的写法呢；

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

那你这不是脑残吗？非要多此一举弄个该死的call ，搞毛？直接 add(1,1)

答：其实 这个写法就是再举个例子 ，大家不要被迷惑 

    正常写这种加减法功能 谁会脑残这样多此一举？ 嘿嘿 我偷笑！

我不太懂了，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 ，你要搞清楚！
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 3. 什么场景下会用到call， apply 这种装逼的写法呢；

    答：看例子

        function changeStyle(attr, value)
             
            this.style[attr] = value; 
           
        var box = document.getElementById('box');  
        window.changeStyle.call(box, "height", "200px");
   1
2
3
4
5
6
   1
2
3
4
5
6

在这里，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”；

看到这里应该明白了吧没如果还没明白