JS系列之call & apply & bind

参考连接：https://juejin.im/post/59bfe8...

在JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变函数体内部 this 的指向。

1. apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；
2. apply 、 call 、bind 三者均可以利用后续参数传参；
3. bind 是返回对应 函数，便于稍后调用；apply 、call 则是当即调用。

apply、call 的区别

func.apply(thisArg, [argsArray])
fun.call(thisArg, arg1, arg2, ...)

对于 apply、call 两者而言，做用彻底同样，只是接受参数的方式不太同样。

var func = function(arg1, arg2) {
   ...   
};

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2]);

call 须要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

bind

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

bind()方法会建立一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以建立它时传入 bind()方法的第一个参数做为 this，传入 bind() 方法的第二个以及之后的参数加上绑定函数运行时自己的参数按照顺序做为原函数的参数来调用原函数。
bind返回值是函数

var obj = {
    name: 'Dot'
}

function printName() {
    console.log(this.name)
}

var dot = printName.bind(obj)
console.log(dot) // function () { … }
dot()  // Dot

bind 方法不会当即执行，而是返回一个改变了上下文 this 后的函数。而原函数 printName 中的 this 并无被改变，依旧指向全局对象 window。

有个有趣的问题，若是连续 bind() 两次，亦或者是连续 bind() 三次那么输出的值是什么呢？像这样：

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
  
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。缘由是，在Javascript中，屡次 bind() 是无效的。更深层次的缘由， bind() 的实现，至关于使用函数在内部包了一个 call / apply ，第二次 bind() 至关于再包住第一次 bind() ,故第二次之后的 bind 是没法生效的。

参数

function fn(a, b, c) {
    console.log(a, b, c);
}
var fn1 = fn.bind(null, 'Dot');

fn('A', 'B', 'C');            // A B C
fn1('A', 'B', 'C');           // Dot A B
fn1('B', 'C');                // Dot B C
fn.call(null, 'Dot');      // Dot undefined undefined

call 是把第二个及之后的参数做为 fn 方法的实参传进去，而 fn1 方法的实参实则是在 bind 中参数的基础上再日后排。