call、apply、bind 方法总结

区别

Apply

接受两个参数，第一个参数是this的指向，
第二个参数是函数接受的参数，以数组的形式传入

改变 this 指向后原函数会立即执行，且此方法只是临时改变 this 指向一次

function fn(...args) {
  console.log(this, args)
}
let obj = {
  myname: '张三',
}

fn.apply(obj, [1, 2]) // this会变成传入的obj，传入的参数必须是一个数组；
fn(1, 2) // this指向window

Call

第一个参数也是this的指向

后面传入的是一个参数列表

跟apply一样，改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

fn.call(obj,1,2); // this会变成传入的obj，传入的参数必须是一个数组；
fn(1,2) // this指向window

bind

bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)

改变this指向后不会立即执行，而是返回一个永久改变this指向的函数

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

const bindFn = fn.bind(obj); // this 也会变成传入的obj ，bind不是立即执行需要执行一次
bindFn(1,2) // this指向obj
fn(1,2) // this指向window

小结

从上面可以看到，apply、call、bind三者的区别在于：

• 三者都可以改变函数的this对象指向

• 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window

• 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入

• bind 是返回绑定this之后的函数，apply 、call 则是立即执行

  ---

当第一个参数为 null、undefined 的时候，默认指向 window(在浏览器中)

fn.apply(null,[1,2]); // this 指向 window
fn.apply(undefined,[1,2]); // this 指向 window

call 是属于所有 Function 的方法,也就是 Funtion.prototype.call

call 方法的 length 属性是 1。

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

注意:与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

示例:

function fun() {
  console.log(this.name, arguments)
}
let obj = {
  name: 'cheng',
  age: 20,
}
fun.call(obj, 'cai', 'cai', '24', '18')
//cheng [Arguments] { '0': 'cai', '1': 'cai', '2': '24', '3': '18' }

apply 与 call() 非常相似，不同之处在于提供参数的方式。apply 使用参数数组而不是一组参数列表。apply 可以使用数组字面量（array literal），如 fun.apply(this, ['eat', 'bananas'])，或数组对象，

如 fun.apply(this, new Array('eat', 'bananas'))。

你也可以使用 arguments对象作为 argsArray 参数。 arguments 是一个函数的局部变量。 它可以被用作被调用对象的所有未指定的参数。 这样，你在使用 apply 函数的时候就不需要知道被调用对象的所有参数。 你**可以使用 arguments 来把所有的参数传递给被调用对象**。 被调用对象接下来就负责处理这些参数。

从 ECMAScript 第 5 版开始，可以使用任何种类的类数组对象，就是说只要有一个 length 属性和(0..length-1)范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似 {'length': 2, '0': 'eat', '1': 'bananas'} 形式的对象。

通过语法就可以看出 call 和 apply 的在参数上的一个区别：

1. call 的参数是一个列表，将每个参数一个个列出来
2. apply 的参数是一个数组，将每个参数放到一个数组中

语法:func.apply(thisArg, [argsArray]);

apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。
 @param thisArg this指向
 @param argsArray 参数数组

thisArg

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

argsArray

可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从 ECMAScript 5 开始可以使用类数组对象

示例:

var array = ['a', 'b']
var elements = [0, 1, 2]
array.push.apply(array, elements)
console.info(array) // ["a", "b", 0, 1, 2]
//[ 'a', 'b', 0, 1, 2 ]

语法:function.bind(thisArg[, arg1[, arg2[, ...]]])