call()与apply()的区别

JavaScript函数,事实上是对象,他们均有两个非继承而来的方法,它们就是call()apply(),它们在函数中扮演着什么样的角色呢?

它们俩其实功能是一样一样的,都是在特定的作用域中调用函数,就等于设置函数体中this对象的值。但是,它们也有各自的特点。

call()可以传多个参数,第一个参数是一个对象,后面的参数就是该函数的参数。
apply()最多只能传两个参数,第一个参数是一个对象,第二个参数是该函数参数组成的数组,也可以是arguments对象。

说了这么多文绉绉的东西,举个栗子吧~~~

var name = "李四";
var zhangsan = {
    name: "张三",
    age: 18
};
function getName(){
    return this.name; 
}
function add(a,b){
    return this.age+a+b;
}
console.log(getName());    //  "李四"
console.log(getName.call(zhangsan));    //  "张三"
console.log(add.apply(zhangsan,[2,3]));    //  23

第一个输出"李四",这个很好理解,因为getName()如果直接执行的话,其this指针指向的是window,因为getName()属于全局函数;

第二个输出"张三",根据上面讲的call()的作用可知,此时getName()中的this指针指向不再是window,而改成了zhangsan,所以自然getName()执行后返回的是zhangsan.name;

第三个输出 23,根据上面讲的apply()作用与call()作用一致可知,此时add()中的this指针指向zhangsan,而add参数中的ab则一 一对应数组[2,3] 中的每一项,所以add()执行后返回的是zhangsan.age+2+3,计算结果为23

等等,上面提到的arguments是什么鬼?在例子中怎么没有出现?

其实嘛,arguments是个一种长得很像数组的类数组对象,它也具有length属性,却不具有数组的其他方法,所以它并不是数组,可以看做是由函数实参组成的一个集合。

说了这么多,call()apply()到底在实际项目中有什么用呢?

我个人觉得,这两者最大作用莫过于实现对象间的继承了。比如上面提到的那个arguments,它不是数组,但是如果想将它变为数组,这该如何实现?

这时call()就可以派上用场了。通过Array.prototype.slice.call(arguments)就可以将arguments这样的类数组转成真正的数组。

再比如,通过Math.max.apply(null,arr)这样的方式可以取得一个arr数组中的最大值。这是因为Math.max()如果直接调用的话是不能够直接传入数组的,必须要一个个参数传进去,所以通过apply()可以很方便的实现取数组最大值的功能。

本文重点总结

① call() 与 apply() 功能基本一致,都是用于改变函数作用域
② call() 可以传多个参数,第一个参数后的所有参数为该函数的参数;apply() 只能传两个参数, 且第二个参数是该函数的参数所组成的数组或arguments对象

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • 在JavaScript编程中,this关键字总是让初学者感到迷惑,Function.prototype.call和...
    白小虫阅读 407评论 0 1
  • call 和 apply EC3给Function的原型定义了两个方法,它们是 Function.prototyp...
    WeekOne阅读 448评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,750评论 2 17
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,059评论 0 3