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

作者：郭小北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（） 就是用来让括号里的对象 来集成括号外的函数的属性！可以称之为继承！