bind、apply、call解析

目录
  1. 学习来源
  2. 过去的困惑
  3. 格式
  4. 相同之处
  5. 不同
  6. 小小知识点

1. 学习来源

推荐一篇教程,用例丰富、描述准确、总结到位:
深入浅出妙用 Javascript 中 apply、call、bind

上文作者的总结

  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
  • apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
  • apply 、 call 、bind 三者都可以利用后续参数传参;
  • bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

2. 过去的困惑

过去对于js的学习就停留于“传参直接调用方法”,认为Array.prototype.push.apply这样的语句有点抽象,无法理解。

// 用例目的:把 array2 追加到 array1 的尾部
var array1 = [1,2,3,4,5]; 
var array2 = [7,7,7,7,7]; 

Array.prototype.push.apply(array1, array2);            /* array1 值为  [1,2,3,4,5,7,7,7,7,7] */
// 实际就是以array1这一数组变量调用了Array对象的push方法
// 并且将array2中的每一个元素拆解为一个push方法的参数

具体扩展后:

Array.prototype.push.apply(array1,  array2);

等同于如下写法:

array1.push(array2[0],  array2[1],  array2[2],  array2[3],  array2[4]);

es6优化后:

// 使用es6的"...扩展运算符"取代apply方法
array1.push(...array2) ;

追加一个小栗子:

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

3. 格式

var func = function (arg1, arg2) {};

func.apply(this, [arg1, arg2]);       // 调用func函数,并且指定this为当前作用域,并且把两个参数以数组的形式传入

func.call(this, arg1, arg2);            // 调用func函数,并且指定this为当前作用域,顺序传入参数 

func.bind(this);                            // 为func函数绑定作用域为“当前的this”,留作后续调用

4. 相同之处

bing、apply、call三者都:

  • 用于改变函数指向的this对象,即函数作用域;
  • 传入的第一个参数即为this指向的新对象,即“想要指定的上下文”
  • 都可以传入参数(bind的传参类似于传入默认值)

5. 不同

bind: 创建并返回一个新函数,并绑定每一次的this,但并不调用
apply:指定此次的this,并且立即调用;(以数组形式传参)
call:指定此次的this,并且立即调用;(多参数逐个传参)

6. 小小知识点

6.1 多次调用bind是无效的

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func();          // 输出3,绑定的上下文是foo
 
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func();         // 输出3,绑定的上下文依然是foo

文首作者解释的无效原因

bind() 的实现,相当于使用函数在内部包了一个 call / apply ,第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

对于这段话,我的理解是:
对于bind调用链来说,执行顺序是从后往前的。
var func = bar.bind(foo).bind(sed).bind(fiv);
这一句的实际调用顺序是bind(fiv) ==> bind(sed) ==> bind(foo);
也可以看做 ( ( (bar.bind(fiv)) ).bind(sed) ).bind(foo);

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

推荐阅读更多精彩内容