本日想谈谈一道前端口试题，我做口试官的时刻常常喜好用它来考核口试者的基础是不是踏实，以及逻辑、思维能力和临场表现，题目是：“模仿完成ES5中原生bind函数”。
或许这道题目已不再新颖，部份读者也会有思绪来解答。社区上关于原生bind的研讨也许多，比方用它来完成函数“颗粒化（currying）”，
或许“反颗粒化（uncurrying）”。
然则，我确信有许多细节是您注重不到的，也是社区上关于这个话题广泛缺失的。
这篇文章面向有较稳固JS基础的读者，会从最基础的明白入手，一直到剖析ES5-shim完成bind源码，置信差别水平的读者都能有所收成。
也迎接人人与我议论。

bind函数终究是什么?

在开启我们的探究之前，有必要先明白一下bind究竟完成了什么：
1）简朴粗犷地来讲，bind是用于绑定this指向的。（假如你还不相识JS中this的指向题目，以及实行环境上下文的奥妙，这篇文章临时就不太合适浏览）。

2）bind运用语法：

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

bind要领会建立一个新函数。当这个新函数被挪用时，bind的第一个参数将作为它运行时的this，以后的一序列参数将会在通报的实参前传入作为它的参数。本文不盘算科普基础，假如您还不清楚，请参考MDN内容。

3)bind返回的绑定函数也能运用new操作符建立对象：这类行动就像把原函数当做组织器。供应的this值被疏忽，同时挪用时的参数被供应给模仿函数。

低级完成

相识了以上内容，我们来完成一个低级的bind函数Polyfill:

Function.prototype.bind = function (context) {
    var me = this;
    var argsArray = Array.prototype.slice.call(arguments);
    return function () {
        return me.apply(context, argsArray.slice(1))
    }
}

这是平常“表现优越”的口试者所能给我供应的答案，假如口试者能写到这里，我会给他60分。
我们先扼要解读一下：
基础原理是运用apply举行模仿。函数体内的this，就是须要绑定this的实例函数，或许说是原函数。末了我们运用apply来举行参数（context）绑定，并返回。
同时，将第一个参数（context）之外的其他参数，作为供应给原函数的预设参数，这也是基础的“颗粒化（curring）”基础。

低级完成的加分项

上面的完成（包括背面的完成），实际上是一个典范的“Monkey patching(猴子补丁)”，即“给内置对象扩大要领”。所以，假如口试者能举行一下“嗅探”，举行兼容处置惩罚，就是如虎添翼了，我会给10分的附加分。

Function.prototype.bind = Function.prototype.bind || function (context) {
    ...
}

颗粒化（curring）完成

上述的完成体式格局中，我们返回的参数列内外包括：atgsArray.slice(1)，他的题目在于存在预置参数功用丧失的征象。
设想我们返回的绑定函数中，假如想完成预设传参（就像bind所完成的那样），就面对为难的局势。真正完成颗粒化的“圆满体式格局”是：

Function.prototype.bind = Function.prototype.bind || function (context) {
    var me = this;
    var args = Array.prototype.slice.call(arguments, 1);
    return function () {
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return me.apply(contenxt, finalArgs);
    }
}

假如口试者能够给出如许的答案，我内心独白会是“不错啊，貌似你就是我要找的谁人TA～”。然则，我们注重在上边bind要领引见的第三条提到：bind返回的函数假如作为组织函数，搭配new症结字涌现的话，我们的绑定this就须要“被疏忽”。

组织函数场景下的兼容

有了上边的解说，不难明白须要兼容组织函数场景的完成：

Function.prototype.bind = Function.prototype.bind || function (context) {
    var me = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var F = function () {};
    F.prototype = this.prototype;
    var bound = function () {
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.contact(innerArgs);
        return me.apply(this instanceof F ? this : context || this, finalArgs);
    }
    bound.prototype = new fNOP();
    return bound;
}

假如口试者能够写成如许，我险些要给满分，会帮助联络HR谈薪酬了。固然，还能够做的越发严谨。

更严谨的做法

我们须要挪用bind要领的一定如果一个函数，所以能够在函数体内做一个推断：

if (typeof this !== "function") {
  throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}

做到统统这统统，我会很高兴的给满分。实在MDN上有个本身完成的polyfill，就是云云完成的。
别的，《JavaScript Web Application》一书中对bind()的完成，也是云云。

故事貌似要画上休止符了——

统统还没完，热潮行将演出

假如你以为如许就完了，实在我会通知你说，热潮才刚要演出。曾的我也以为上述要领已比较圆满了，直到我看了es5-shim源码（已恰当删减）：

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 = target.apply(
                this,
                array_concat.call(args, array_slice.call(arguments))
            );
            if ($Object(result) === result) {
                return result;
            }
            return this;
        } else {
            return target.apply(
                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 (' + boundArgs.join(',') + '){ return binder.apply(this, arguments); }')(binder);

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

看到了如许的完成，心中的疑心太多，不禁以为我看了“假源码”。然则仔细剖析一下，剩下就是一个大写的 。。。服！
这里先留一个牵挂，不举行源码剖析。读者能够本身先研讨一下。假如想看源码剖析，点击这篇文章的后续－源码解读。

总结

经由过程比对几版的polyfill完成，关于bind应该有了比较深入的熟悉。作为这道口试题的考核点，一定不是让口试者完成低版本浏览器的向下兼容，由于我们有了es5-shim,es5-sham处置惩罚兼容性题目，而且无脑兼容我也以为是汗青的倒退。
回到这道题考查点上，他有用的考核了很主要的学问点：比方this的指向，JS的闭包，原型原型链功力，设想程序上的兼容斟酌等等硬素养。
在前端手艺疾速生长迭代的本日，在“前端市场是不是饱和”“前端求职火爆非常”“前端入门简朴，钱多人傻”的急躁环境下，对基础内功的修炼就显得尤为主要，这也是你在前端路上能走多远、走多久的症结。

PS：百度学问搜刮部大前端继承招兵买马，有意向者敏捷联络。。。