如何理解和熟练运用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
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 这种装逼的写法呢；

---

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

---

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

   答：其实 这个写法就是再举个例子 ，大家不要被迷惑 
   
       正常写这种加减法功能 谁会脑残这样多此一举？ 嘿嘿 我偷笑！
   
      
      
   1
   2
   3
   4

2. 我不太懂了，add.call（sub）了，肯定是add直接sub里面的减法了呀，不然弄个call干嘛呀？

   答：call的用法和意义：
   
   官方解释：
   
      
      
   1
   2
   3
   4

   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 的“飞天”技能学会了，回到函数

 
 
1
2
3
4
5
6

----------


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
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

    答：看例子 

 
 
1
2
3
4

        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
 
 
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”；

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

apply() 这个用法

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

看了这个写法 你应该明白了把， 啊哈其实 就是写法 和形式不同而已，本质是一样的，apply(),是推进到

数组里而已，也是为了改变this、

这个，也是为了偷 add 的飞天技能哈！

总结一句话：call（） 就是用来让括号里的对象 来集成括号外的函数的属性！可以称之为继承！

欢迎观看，纯属原创， 码字不容易，如需转载，请注明网址出处 谢谢！