我以为我实现了bind

上一次跳槽面试的时候,一次面试接近尾声,进行的特别顺利,直到面试官提出一个问题,“请你实现一下bind”。
“什么!!实现bind?为什么不问call、apply、bind的使用及区别,这些我都倒背如流”。

因为那时的段位还很低,对知识的掌握还停留在使用层面,所以被问到的时候是特别懵的。好在面试官人很好,经过多次提示还是写出了一个初级实现。
代码如下:

Function.prototype.bind = Function.prototype.bind || function (that) {
    var me = this // this就是调用的函数
    
    // 将arguments转换为数组
    var argsArray = Array.prototype.slice.call(arguments)
    
    // 返回一个函数,符合bind的特性
    return function () {
        // 返回的函数中执行调用的函数,并通过apply改变this指向,传递参数
        return me.apply(that, argsArray.slice(1))
    } 
}
// 验证一下
function aa(p1, p2) {
    console.log(this.a + "|" + p1 + "|" + p2)
}
var fn = aa.bind({ a: 2 }, "p1")
fn("p2") // 2|p1|undefined

这就是一个最最基础的实现,我一度认为bind的实现也不过如此。不过在使用的时候发现一个问题,注意上面的验证代码输出结果,undefined是什么鬼?不应该是输出 2|p1|p2。这时因为如此实现的bind只能通过调用bind的时候给函数传参,无法在调用bind返回的函数时传参。
有了上面的实现,解决这个问题也不太难。

Function.prototype.bind = Function.prototype.bind || function (that) {
    var me = this
    var args = Array.prototype.slice.call(arguments, 1)
    
    return function () {
        // 获取调用返回的函数时传递的参数,并将两次参数合并
        var innerArgs = Array.prototype.slice.call(arguments)
        var totalArgs = args.concat(innerArgs)
        return me.apply(that, totalArgs)
    }
}

// 验证一下
function aa(p1, p2) {
    console.log(this.a + "|" + p1 + "|" + p2)
}
var fn = aa.bind({ a: 2 }, "p1")
fn("p2") // 2|p1|p2

验证通过,心想这回应该没有问题了吧。直到有一天在总结 this 指向问题的时候。遇到了一个 new 和 bind 同时出现的情况。也就是说当 bind 返回的函数作为构造函数调用时。那么通过 bind 绑定的this就需要被忽略,很明显 this 要绑定到创建的实例上。

从改变 this 指向的角度来说,new 的优先级要高于 bind 的绑定。
如果对this的指向问题感兴趣可以参考《this到底指向谁》一文。

知道真相的我赶紧翻出代码,完善我的 bind。这次的进展不如上次顺利,因为又要用到继承的相关知识。抽出时间又将js的继承简单总结了下,《永不过时的面向对象——继承》。这下算是豁然开朗,噼里啪啦……代码如下:

Function.prototype.bind = Function.prototype.bind || function (that) {
    var me = this
    var args = Array.prototype.slice.call(arguments, 1)
    
    var F = function () { }
    // F的原型继承调用函数的原型,利用空对象方式实现原型链继承
    F.prototype = this.prototype
    
    var bound = function () {
        var innerArgs = Array.prototype.slice.call(arguments)
        var totalArgs = args.concat(innerArgs)
        return me.apply(this instanceof F ? this : that, totalArgs)
    }
    
    // 将 bound 的 prototype 对象指向一个 F 的实例
    bound.prototype = new F()
    return bound
}

核心在于通过创建空对象的方式,实现了 bound 继承调用函数。

为何要继承原函数?
因为 new 调用 bind 后返回的函数,也是相当于将原函数作为构造函数调用,创建实例,如果不继承原函数,那么创建的实例与原函数没有任何关系。

另一个关键点在于对 new 的理解,new 的时候都做了些什么操作,在上面分享的《继承》一文中有详细解答。
由于通过 new 调用返回的函数时,bound 内的 this 指向自身实例。并且 bound 的原型指向 F 的实例,又因为 F 的原型继承调用函数的原型,所以有 this instanceof F为 true,自然三目表达式的结果为 this。因此创建的实例也是调用函数的实例。this instanceof me也为 true。
验证代码:

function Animal(a) {
    this.a = a
}

const o1 = {}

// 普通调用
var a1 = Animal.bind(o1)
a1(2)
console.log(o1.a) // 2

// 作为构造函数调用
var a2 = new (Animal.bind(o1))(5);
console.log(a2) // Animal {a: 5}    
a2.__proto__.constructor === Animal  // true
console.log(a2.a) // 5

这次我不敢说我实现了 bind,只能说这次的实现比之前更完善。为了看下 bind 的完美实现方式,翻出了es5-shim.js中的 bind 源码。

function bind(that) {
   var target = this;
   if (!isCallable(target)) {
       throw new TypeError('Function.prototype.bind called on incompatible ' + target);
   }
   var args = array_slice.call(arguments, 1);
   var bound;
   var binder = function () {
       if (this instanceof bound) {
           // 构造函数调用情况
           var result = apply.call(
               target,
               this,
               array_concat.call(args, array_slice.call(arguments))
           );
           if ($Object(result) === result) {
               return result;
           }
           return this;
       } else {
           // 正常调用情况
           return apply.call(
               target,
               that,
               array_concat.call(args, array_slice.call(arguments))
           );
       }
   };

   var boundLength = max(0, target.length - args.length);
   var boundArgs = [];
   for (var i = 0; i < boundLength; i++) {
       array_push.call(boundArgs, '$' + i);
   }

   bound = $Function(
       'binder',
       'return function (' + array_join.call(boundArgs, ',') + '){ return binder.apply(this, arguments); }'
   )(binder);

   if (target.prototype) {
       Empty.prototype = target.prototype;
       bound.prototype = new Empty();
       Empty.prototype = null;
   }

   return bound;
}

比我想象的要复杂一些,但是实现的核心部分是相似的。其中有一点是特别容易被忽略的,就是每个函数都有像数组和字符串那样的 length 属性,用于表示函数的形参个数。并且函数的 length 属性值是不可重写的。es5-shim 是为了最大限度地进行兼容,包括对返回函数 length 属性的还原。

一次 bind 实现的经历。

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

推荐阅读更多精彩内容