你真的搞懂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。