【原创】关于Function.prototype.bind()的一些事

你真的搞懂Function.prototype.bind()了吗？

首先来看一道有意思的面试题：

var x = 0
var func = function () {
    console.log(this.x)
}

var obj1 = { x: 1 }
var obj2 = { x: 2 }
var obj3 = { x: 3 }

var func1 = func.bind(obj1)
func1()

var func2 = func.bind(obj1).bind(obj2)
func2()

var func3 = func.bind(obj1).bind(obj2).bind(obj3)
func3()

输出是123吗？

no，答案是111

为什么呢？MDN中，对bind函数返回的值定义为：返回由指定的this和初始化参数改造的原函数拷贝。这也正是bind和call的区别。

这里为什么要强调是bind和call而不是apply呢？
因为bind和call都是分开传递参数，而apply则使用数组方式进行传递。

回顾一下apply、call、bind三者的区别：

// bind - 返回由指定的this值和初始化参数改造的**原函数拷贝**
function.bind(thisArg[, arg1[, arg2[, ...]]])
// call - 返回值是你**调用的方法的返回值**，若该方法没有返回值，则返回undefined
function.call(thisArg[, arg1[, arg2[, ...]]])
// apply - 同call
function.apply(thisArg, [argsArray])

从定义上看，三个函数的主要功能都是修改原函数this的指向。

call和apply立即执行并返回了改造后调用函数的返回值；而bind则只对函数进行了改造并返回其改造后的拷贝，并没有执行该拷贝。

如果你理解了这点，那么上题中的func.bind(obj1)我们可以改造为：

function () {
    console.log(obj1.x)
}

由于this被替换掉，在此基础上再进行任何替换this指向的操作都不会再生效。也就是说后面随便他改成call、apply或者bind答案都还是111。

参考资料
MDN - Function.prototype.bind()