Javascript中call，apply，bind方法的详解与总结

在Javascript中，call、apply和bind是Function对象的三个原生方法，它们的作用都是改变函数中this的指向。虽然功能类似，但是它们的实现方式和使用场景略有不同。

call()方法

call()方法的作用是在指定的this值和参数下调用函数。语法如下：

function.call(thisArg, arg1, arg2, ...)

• thisArg：可选参数，函数的this指向的对象，如果该参数没有传入，则默认指向window/global对象。
• arg1, arg2, ...：可选参数，表示调用函数时传入的参数。

当使用call()调用函数时，会把调用该函数的对象作为第一个参数，然后依次传入其他参数执行该函数。

示例1：

function multiply(num1,num2){
  return num1 * num2;
}

let result = multiply.call(null,3,4); // this指向 null
console.log(result); // 12

示例2:

var obj = {name : "张三"};
function getName(){
  return this.name;
}
var getNameByCall = getName.call(obj);  // this指向 obj
console.log(getNameByCall); // 张三

apply()方法

apply()方法和call()很像，也是调用函数并且改变函数this指向。语法如下：

function.apply(thisArg, [arg1, arg2, ...])

• thisArg：可选参数，函数的this指向的对象，如果该参数没有传入，则默认指向window/global对象。
• [arg1, arg2, ...]：可选参数，表示调用函数时传入的参数，要放在一个数组中。

当使用apply()调用函数时，会把调用该函数的对象作为第一个参数，然后把其他参数放在一个数组内作为第二个参数传入执行该函数。

示例1：

let arr = [1, 2, 3];
let maxNum = Math.max.apply(null,arr); // null指向this
console.log(maxNum); // 3

示例2：

let person1 = {
    name:'Sara',
    age:23,
    say:function(){
        console.log(this.name + '今年' + this.age);
    }
}

let person2 = {
    name:'Tom',
    age:25,
}

person1.say.apply(person2); // 改变了函数中的this指向，输出 Tom今年25

bind()方法

bind()方法也能调用函数并改变函数中this指向，但是和call()、apply()不同的是，bind()方法会返回一个新的函数，而call()和apply()则不会。语法如下：

function.bind(thisArg, arg1, arg2, ...)

• thisArg：可选参数，函数的this指向的对象，如果该参数没有传入，则默认指向window/global对象。
• arg1, arg2, ...：可选参数，表示调用函数时传入的参数。

当使用bind()调用函数时，会把调用该函数的对象作为第一个参数，然后依次传入其他参数执行该函数。

示例1：

var obj = { x: 10 };
function getX(){
  return this.x;
}
var getXByBind = getX.bind(obj); // 返回函数
console.log(getXByBind()); // 10

示例2：

function add(a,b) {
  return a + b;
}
let add5 = add.bind(null, 5); // 不指定 this，创建了一个绑定了额外参数的新函数
console.log(add5(3)); // 输出 8

let add15 = add.bind(null, 15);
console.log(add15(3)); // 输出 18

总结

call()、apply()和bind()都是函数原型上的方法，用于改变函数中this的指向。

• call()和apply()的作用类似，只是传参方式不同，前者依次传入多个参数，后者放在数组中。
• bind()方法不会立即执行函数，而是返回一个新的函数，方便后期再次调用。

在实际使用中，call()、apply()和bind()的使用场景有所不同，但是都是用于改变函数中this的指向，可以根据具体需求选择使用。