call、apply、bind 学习

call、apply和bind是JavaScript中用于改变函数执行上下文（即this指向）的三个方法。

call和apply方法会立即执行函数，而bind方法返回一个新函数

1.call方法。可以接受多个参数，除了一个是this指向外，其余的参数对应函数的参数

var str = 'one';
var obj = {
  str : 'two'
}
function getStr(str1,str2){
  return this.str + '-' + str1 + '-' + str2;
}
console.log(getStr('1','2')); // 'one-1-2'
console.log(getStr.call(obj,'1','2')); // 'two-1-2'

2.apply方法。接受两个参数，第一个参数是this指向的对象，第二个参数是一个数组或者arguments对象，包含作为函数参数的元素

var str = 'one';
var obj = {
  str : 'two'
}
function getStr(str1,str2){
  return this.str + '-' + str1 + '-' + str2;
}
console.log(getStr('1','2')); // 'one-1-2'
console.log(getStr.call(obj,'1','2')); // 'two-1-2'
console.log(getStr.apply(obj,['1','2'])); // 'two-1-2'

call和apply区别在于call从第二个参数开始是给getStr分开传递的参数，apply则是把所有要传递给getStr的参数整合成一个数组作为第二个参数

3.bind方法。创建一个新的函数，这个新函数的this值被永久绑定到bind方法的第一参数，而且bind可以接受额外的参数，这些参数会在调用新函数时作为其参数。例如，let newFunc = func.bind(obj, arg1, arg2)，则newFunc的this值为obj，且默认带有arg1和arg2参数

var str = "one";
var obj = {
  str : "two",
  getStr : function( str1, str2 ){
    return this.str + '-' + str1 + '-' + str2;
  }
}
var fn1 = obj.getStr;
var fn2 = obj.getStr.bind(obj);
var fn3 = obj.getStr.bind(obj,'1','3');
console.log(fn1('1','2')) // "one-1-2"
console.log(fn2('1','2')) // "two-1-2"
console.log(fn3('1','2')) // "two-1-3"
console.log(fn3()) // "two-1-3"

总结:

bind方法和call和apply方法都能改变this指向。区别是它们除了传参数方式有点不同外，还有bind方法并没有调用原函数。call和apply方法在执行的时候同时也调用了原函数