深入理解JavaScript中的call、apply、bind方法的区别

在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念

apply、call

apply:应用某一对象的一个方法,用另一个对象替换当前对象

call:调用一个对象的一个方法,以另一个对象替换当前对象

function person() {}
 
person.prototype = {
   attr: {age:18,sex:'girl'},
   say: function() {
    console.log("My age is " + this.attr.age);
    console.log("I am a " + this.attr.sex);
   }
}
 
var Marry = new person();
Marry.say();
 
// My age is 18
// I am a girl 

改变指向

function person() {}
 
person.prototype = {
 attr: {age:18,sex:'girl'},
 say: function() {
  console.log("My age is " + this.attr.age);
  console.log("I am a " + this.attr.sex);
 }
}
 
xiaoming ={ attr : {age:20,sex:'boy'} };
 
var Marry = new person();
Marry.say();
 
Marry.say.call(xiaoming);
// My age is 18
// I am a girl
// My age is 20
// I am a boy 

共同之处

都可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

不同之处
  • apply:最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里面。如果argArray 不是一个有效的数组或者不是arguments对象,那么将导致一个TypeError。如果没有提供argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作thisObj,并且无法被传递任何参数。
fun.call(thisArg[, arg1[, arg2[, ...]]])
 
function f(x,y){
 console.log(x+y);
}
f.call(null, 1, 1)
//return 2 

  • call:则是直接的参数列表,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
fun.apply(thisArg, [argsArray])
 
function f(x,y){
 console.log(x+y);
}
f.call(null, [1,1])
//return 2 

apply和call功能一样,只是传入的参数列表形式不同,其中 thisArg是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

如果某个函数的参数数量是不固定的,当你的参数是明确知道数量时用 call ,而不确定的时候用apply,然后把参数 push进数组传递进去。当参数数量不确定时,函数内部也可以通过arguments这个数组来遍历所有的参数,我们看一下一些用法
代码一

var array1 = [12 , "foo" , {name:"Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
console.log(array1);
//[12, "foo", Object, -2458, "Doe", 555, 100] 

代码二

var numbers = [5, 458 , 120 , -215 ];
Math.max.apply(null,numbers);
//458 

代码三

log(12 , "foo" , {name:"Joe"} , -2458);
function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');
console.log.apply(console, args);
};
// (app) 12 foo Object {name: "Joe"} -2458 

bind
fun.bind(thisArg[, arg1[, arg2[, ...]]]) 

与上面不同的是,bind会返回一个改变this指向的新函数 ,注意这里强调的是新函数,其与之前的使用的不是同一块内存地址,所以当你需要重复使用这个函数的时候,你就不得不把其保存到一个变量,方便下次调用。上面的两个函数都是返回的执行结果,即调用即执

行,此外,另外需要注意的地方是,bind函数中的首个参数,会自动成为返回新函数中参数的默认值,那么正式调用的时候,只需要给出除首个参数外,剩余参数即可。

function f(x,y){
 console.log(x+y);
}
f.call(null, [1,1])
var new_f = f.bind(null,1,1)
//return new function
new_f(1)
//return 2 

需要说明的是,上面所有示例代码中的thisArg参数均用null来代替了,在未给出指定thisArg对象的情况下,nullundefined下this指向是全局对象,即js代码执行环境
apply、call、bind比较

var obj = {bar: 'Oops , this is a bad idea' };
 
var foo = {
  get: function() {
    return this.bar;
  }
}
 
var bind = foo.get.bind(obj) ,call = foo.get.call(obj) ,apply = foo.get.apply(obj);
 
console.log(bind(),call,apply);
console.log(bind,call,apply); 
 
console.log(typeof bind,typeof call,typeof apply);
console.log(typeof bind(),typeof call,typeof apply); 


区别是,当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind()方法。而 apply/call则会立即执行函数

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

推荐阅读更多精彩内容