apply,call,bind三者的使用与区别

call、apply、bind都可以改变函数运行时的上下文,也就是函数体内部的this指向。其中call和apply非常相似,他们的区别仅仅体现在参数形式的不同,所以我们先介绍call及apply。

1.call和apply

javascript的函数体内的上下文可以在运行时改变。看下面的代码

function Cat(name){
    this.name = name
    this.sayHi = function(){
       console.log("hi,I am " + this.name) 
    }
}
 
function Mouse(name){
    this.name = name
}
 
var cat = new Cat("Tom")
cat.sayHi()   // hi, I am Tom
var mouse = new Mouse("Jerry")
mouse.sayHI()  // Uncaught TypeError: mouse.sayHI is not a function

上面代码先创建了一个Cat类的实例对象cat并调用了其sayHi方法。在sayHi被调用时,其内部的this指向的是cat实例。

接下来我创建了一个mouse对象,也想调用sayHi方法,显而易见因为Mouse构造函数的定义中没有sayHi这个方法从而导致报错。那么有没有简单的方式可以直接调用到Cat类中的sayHi方法呢。答案是肯定的,那就是借助call和apply实现。

cat.sayHi.call(mouse)  //hi,I am Jerry
cat.sayHi.apply(mouse)  //hi,I am Jerry

可以看到两种方式都可以实现我们想要的效果。其原因是在调用call和apply的时候,sayHi函数内部的this指向变成了我们传入call和apply方法的第一个参数对象mouse。

上面的调用方式看不出call和apply的具体区别。我们稍微修改一下代码

function Cat(name){
    this.name = name
    this.sayHi = function(age, favor){
       console.log("hi,I am " + this.name + "," + age + " years old,I like " + favor) 
    }
}
 
function Mouse(name){
    this.name = name
}
 
var cat = new Cat("Tom")
cat.sayHi(12, "fish")   // hi,I am Tom,12 years old,I like fish
var mouse = new Mouse("Jerry", 8, "cheese")
mouse.sayHI(10, "cheese")  // Uncaught TypeError: mouse.sayHI is not a function
 
cat.sayHi.apply(mouse, [10, "cheese"])  // hi,I am Jerry,10 years old,I like cheese
cat.sayHi.call(mouse, 10, "cheese")  // hi,I am Jerry,10 years old,I like cheese

可以看到当给sayHi函数加入了参数之后,调用apply和call 也可以为sayHi传递参数。两者传递参数的方式是有区别的,这也是call和apply仅有的区别。apply使用数组传递参数,call是按顺序传递参数。使用方式如下:

fn.apply(thisObj, [param1,param2,param3])
fn.call(thisObj, param1, param2, param3)

apply与call在使用方式上的区别还使得apply有些特殊的用法。比如:如何使用push方法,不用循环完成两个数组的合并。

var arr1 = [ 1, 2, 3 ]
var arr2 = [ 4, 5, 6 ]
 
Array.prototype.push.apply(arr1, arr2)  // 6 push方法的返回值是合并后数组的长度
console.log(arr1) // [ 1, 2, 3, 4, 5, 6]

因为apply的第二个参数可以直接接受数组,因此在不确定具体有多少参数的时候,推荐使用apply方法。

2.bind

bind方法也可以改变函数运行时的上下文。与apply和call的区别在于,bind方法的返回值是 已经改变了this指向的函数 ,必须手动调用才会执行这个函数,而apply与call是立即执行。再次修改上面的代码

function Cat(name){
    this.name = name
    this.sayHi = function(age, favor){
       console.log("hi,I am " + this.name + "," + age + " years old,I like " + favor) 
    }
}
 
function Mouse(name){
    this.name = name
}
 
var cat = new Cat("Tom")
cat.sayHi(12, "fish")   // hi,I am Tom,12 years old,I like fish
var mouse = new Mouse("Jerry", 8, "cheese")
mouse.sayHI(10, "cheese")  // Uncaught TypeError: mouse.sayHI is not a function
 
cat.sayHi.apply(mouse, [10, "cheese"])  // hi,I am Jerry,10 years old,I like cheese
cat.sayHi.call(mouse, 10, "cheese")  // hi,I am Jerry,10 years old,I like cheese
cat.sayHi.bind(mouse, 10, "cheese")()  // hi,I am Jerry,10 years old,I like cheese

区别在最后一行 cat.sayHi.bind(mouse, 10, "cheese")() 。可以看到与apply和call相比,在bind()方法后还有个(),这正说明了bind方法返回的是一个函数,并不执行,需要手动去调用才会执行。其返回结果与前两者相同。

总结:
apply 、 call 、bind 三者都可以改变函数内部的this指向;
apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
apply 、 call 、bind 三者都可以利用后续参数传参;
后续参数的传递.apply使用数组传递参数,call和bind是按顺序传递参数
bind 返回this指向已经变化的函数,需要手动调用;apply 、call 则是在指向变化后立即调用;

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

推荐阅读更多精彩内容