JavaScript中函数方法apply、cell、bind的使用和区别

相同点： 这三种方法都是函数的，同时都是用来改变this指向的。

---

一、apply

let obj = {
    name: '小明',
}
let testObj = {
    name: '张三',
    age : 18,
    sex: '男',
    saiHi: function(...argument){
      console.log('我是'+ this.name, argument);
    }
}
// 参数1（必填） 要修改的this指向的对象
testObj.saiHi.apply(obj); // 我是小明 []
// 参数二（可选）数组或伪数组，将其作为参数给调用的函数
testObj.saiHi.apply(obj, [1,2,3]); // 我是小明 [1, 2, 3]
testObj.saiHi.apply(obj, {getName: '王五'}); // 我是小明  []
testObj.saiHi.apply(obj, {getName: '王五', length: 2}); // 我是小明  [undefined, undefined]

（1）语法

function.apply(thisArg)
function.apply(thisArg, argsArray)

（2）参数
thisArg： 函数运行时使用的 this 值（注意：this 可能不是该方法看到的实际值）。
argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。
（3）返回值：调用有指定 this 值和参数的函数的结果。
（4）作用：apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数。

二、bind（需要调用）

bind方法需要使用()调用才会执行

let obj = {
    name: '小明',
}
let testObj = {
    name: '张三',
    age : 18,
    sex: '男',
    saiHi: function(...argument){
      console.log('我是'+ this.name, argument);
    }
}
// 参数1（必填） 要修改的this指向的对象
testObj.saiHi.bind(obj)(); // 我是小明 []
// 参数二（可选）可以传任意值
testObj.saiHi.bind(obj, [1,2,3])(); // 我是小明 [1, 2, 3]
testObj.saiHi.bind(obj, {getName: '王五'})(); // 我是小明  {getName: '王五'}
testObj.saiHi.bind(obj, {getName: '王五', length: 2})(); // 我是小明  {getName: '王五', length: 2}
// 参数N（可选）可以传多个值，同参数二
testObj.saiHi.bind(obj, {getName: '王五', length: 2}, true, 'hello')(); // 我是小明  [{getName: '王五', length: 2}, true, 'hello']

（1）语法

function.bind(thisArg[, arg1[, arg2[, …]]])

（2）参数
thisArg
调用绑定函数时作为 this 参数传递给目标函数的值。如果使用new运算符构造绑定函数，则忽略该值。当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg。

arg1, arg2, …
当调用bind的函数被调用时，为绑定函数的参数列表中的参数。
（3）返回值：返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。
（4）作用：bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

三、call

let obj = {
    name: '小明',
}
let testObj = {
    name: '张三',
    age : 18,
    sex: '男',
    saiHi: function(...argument){
      console.log('我是'+ this.name, argument);
    }
}
// 参数1（必填） 要修改的this指向的对象
testObj.saiHi.call(obj); // 我是小明 [] 
// 参数二（可选）可以传任意值
testObj.saiHi.call(obj, [1,2,3]); // 我是小明 [1, 2, 3]
testObj.saiHi.call(obj, {getName: '王五'}); // 我是小明  {getName: '王五'}
testObj.saiHi.call(obj, {getName: '王五', length: 2}); // 我是小明  {getName: '王五', length: 2}
// 参数N（可选）可以传多个值，同参数二
testObj.saiHi.call(obj, {getName: '王五', length: 2}, true, 'hello'); // 我是小明  [{getName: '王五', length: 2}, true, 'hello']

（1）语法

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

（2）参数
thisArg
可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

arg1, arg2, …
指定的参数列表。
（3）返回值：使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。
（4）作用：call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

总结

// bind     调用后执行   传递多个参数（可以为数组）   基于第一个参数的this为指定对象，其他参数为形参
// call     立即执行      传递多个参数（可以为数组）  替换this指向
// apply    立即执行      参数为数组或伪数组			替换this指向

参考地址：
apply：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
bind：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
call：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call