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

原创 2016年05月23日 13:17:08

背景:今天群里有 妹子(我就不指名道姓喽)说:百度了一圈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 这种装逼的写法呢;


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


  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 ,你要搞清楚!
  • 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”;

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

apply() 这个用法

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

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

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

这个,也是为了偷 add 的飞天技能哈!

总结一句话:call() 就是用来让括号里的对象 来集成括号外的函数的属性!可以称之为继承!

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

入坑方式:   欢迎加入~!气氛热情,欢乐多,妹子多!

enlightenedweb前端 聚集地,汇聚了全国顶尖的web前端热爱者,最新技术,最炫潮流,最靠谱的话题:
  做好现在!技术只是为了改变生活!JS前端实用开发QQ群 :
147250970
Web前端HTML5/JS交流群

enlightened 扫描屏幕下方的二维码,可以关注 我的前端公众号 。听说妹子挺多的,及时更新一些前端解惑和段子



版权声明:本文已在我的公众号 :前端你别闹(ID: webunao) 原创首发,转载请务必注明出处!,JS前端实用开发QQ群 :147250970 欢迎加入~!

相关文章推荐

JS中的call()方法和apply()方法用法总结

JacvaScript中的call()方法和apply()方法, 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。 2. 相同点:这两个方法的作用是一样的。都是在特定的...

js中的call()和apply()方法

1.call() 语法:obj1.call(obj2[,param1,param2,...]) 定义:用obj2对象来代替obj1,调用obj1的方法。即将obj1应用到obj2上。 说明:ca...

js中call与apply用法

前天去面试,有个gg问了一些js知识,其中有一道call与apply用法的题目,尽管在365天前用过call方法,但当时还是没能答上来,今天深入总结一下call和apply,它们的作用都是将函数绑定到...

call和apply的用法以及apply的一些妙用

简要介绍了apply和call的作用及一些巧妙用法。

Js中apply与call的区别与用法

解析:apply与call是更改对象的内部指针,即改变对象的this指向的内容。 call与apply的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。...

Js中call和apply的区别和用法

JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。 先来看看JS手册中对call的解释: call 方法 调用一个对象的一个方法,以另一个对象替...
  • fanyuna
  • fanyuna
  • 2012年09月26日 14:54
  • 17918

JavaScript中apply与call的用法意义及区别

call()和apply的区别

Javascript中call和apply的区别与详解

转自:http://www.7old.com/jiaocheng/show-1412.html 在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区...

JS的call方法的作用解释,简单易懂

先看看关于call()的官方解释,“调用一个对象的一个方法,以另一个对象替换当前对象。”,看了这样的解释,或许让你更摸不着头脑了。看例子: var x = "我是全局变量";    //定义...

Js apply 方法 详解

Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js的call() ,apply() 两种方法的区别和用法,最白话文的解释,让枯燥滚粗!
举报原因:
原因补充:

(最多只允许输入30个字)