call、apply、bind 的深入了解，先认识一下 this 呗

认识 this

要理解以上三个方法，首先要正确的认识 js 中 this 的含义。
总结来说一句话，this 指向函数运行时所在的环境对象。

var x = 12; // 即 window.x = 12
function printX() {
    console.log(this.x)
}
printX() // 即window.printX() // 12
// 此处函数的执行环境为 window 下，（this 指向 window）故输出全局变量 x = 12
var obj = {
    x : 34,
    printX: printX
}
obj.printX() // 34
// 此处函数的执行环境为 obj 下，（this 指向 obj）故输出 obj 私有属性 x = 34

理解 call

call 是每个函数都有的一个方法，它允许你在调用函数时为函数指定上下文，同时执行该函数。
即 Function.prototype.call(argument1, argument2, argument3, ... , argumentN), 所有函数都会继承此方法。

即传递给它的第一个参数会作为函数被调用时的上下文。换句话说，this 将会指向传递给 call 的第一个参数。

var obj_call = {
    x: 56
}
printX.call(obj_call) // 56
// 此处this 指向 obj_call，（函数的执行环境为 obj_obj 下）故输出 obj 私有属性 x = 56

然后 传递给它的第二个参数到最后一个参数会作为该函数的参数。让我们改写一下上面的例子。

function printX(y, z) {
    console.log(`x:${this.x},y:${y},z:${z}`)
}
var obj_call_more_argument = {
    x: 56
}
printX.call(obj_call_more_argument, 'yyy', 'zzz') // x:56,y:yyy,z:zzz
// 可以理解为 obj_call_more_argument.printX('yyy', 'zzz');

理解 aplly

aplly 是每个函数都有的一个方法，它允许你在调用函数时为函数指定上下文，同时执行该函数。
即 Function.prototype.apply(argument1, [argument2, argument3, ... , argumentN]), 所有函数都会继承此方法。

其实 apply 作用等同于 call ，但传递参数的方式不同，它只有两个参数。
即传递给它的第一个参数会作为函数被调用时的上下文。换句话说，this 将会指向传递给 apply 的第一个参数。
第二个参数为数组，数组的每一项，会作为该函数的参数 。

function printX(y, z) {
    console.log(`x:${this.x},y:${y},z:${z}`)
}
var obj_apply_more_argument = {
    x: 56
}
printX.apply(obj_apply_more_argument, ['yyy', 'zzz']) // x:56,y:yyy,z:zzz
// 可以理解为 obj_apply_more_argument.printX('yyy', 'zzz');

理解 bind

bind 是每个函数都有的一个方法，它允许你在调用函数时为函数指定上下文，且创建一个新的函数
即 Function.prototype.bind(argument1, argument2, argument3, ... , argumentN), 所有函数都会继承此方法。

bind 传参和 call 一致，但它的作用就只是将该函数的 this 指向第一个参数，并不会主动执行该函数。

function printX(y, z) {
    console.log(`x:${this.x},y:${y},z:${z}`)
}
var obj_bind_more_argument = {
    x: 56
}
var obj_bind_more_argument_fn = printX.bind(obj_bind_more_argument, 'yyy', 'zzz')
obj_bind_more_argument_fn() // x:56,y:yyy,z:zzz
// 或者
printX.bind(obj_bind_more_argument, 'yyy', 'zzz')() // x:56,y:yyy,z:zzz
// 都可以理解为 obj_bind_more_argument.printX('yyy', 'zzz');

感谢阅读 thx~
本文链接：https://627235655.github.io/2018/11/15/call-apply-bind/