【JavaScript】神奇的bind apply call

什么是call、bind、apply？

call，apply , bind 是JavaScript中用于改变普通函数this指向（无法改变箭头函数this指向）的方法，这三个函数实际上都是绑定在Function构造函数的prototype上，而每一个函数都是Function的实例，因此每一个函数都可以直接调用call，apply , bind

call方法

语法： function.call(this, arg1, arg2, ...) 第一个参数是this指向的数据，后面的参数是函数传入的参数

function fn(a, b) {
    console.log(this.a, a, b);
}

// 第一个参数是this指向的数据，后面的参数是函数传入的参数
fn.call({ a: 666 }, 1, 2)

打印结果：

apply方法

语法：function.apply(this, [argsArray])。 第一个参数是this指向的数据，argsArray是一个包含参数的数组。

function fn(a, b) {
    console.log(this.a, a, b);
}
fn.apply({ a: 777 }, [3, 4])

打印结果：

bind方法

语法：function.bind(thisArg, arg1, arg2, ...) 第一个参数是this指向的数据，后面的参数是函数传入的参数

注意：与call和apply方法不同，bind方法并不会立即执行函数，而是返回一个新函数，可以稍后调用。这对于事件处理程序和setTimeout函数等场景非常有用。

function fn(a, b) {
    console.log(this.a, a, b);
}

let fun = fn.bind({ a: 888 }, 5, 6)
fun()

打印结果：

call、bind、apply的区别

1. 调用方式：

• call：使用函数的call方法可以直接调用函数，并传递参数列表。
• bind：使用函数的bind方法可以返回一个新的函数，这个新函数的this值被绑定到指定的对象，但不会立即执行。
• apply：使用函数的apply方法可以直接调用函数，并传递参数列表，与call方法类似，但参数需要以数组或类数组的形式传递。

2. 参数传递方式：

• call：使用call方法时，参数需要一个一个地列举出来，通过逗号分隔。
• bind：使用bind方法时，可以传递任意数量的参数，可以在绑定时传递参数，也可以在调用时传递参数。
• apply：使用apply方法时，参数需要以数组或类数组的形式传递。

3. 执行时机：

• call：调用call方法时，函数会立即执行。
• bind：调用bind方法时，返回一个新函数，需要后续再调用这个新函数才会执行。
• apply：调用apply方法时，函数会立即执行。

总结

• call可以直接调用函数，并传递参数列表，立即执行。
• bind返回一个新函数，将绑定的对象作为this值，可以在绑定时或调用时传递参数，需要手动调用新函数执行。
• apply可以直接调用函数，并传递参数列表，立即执行，参数以数组或类数组的形式传递。

绑定时或调用时传递参数，需要手动调用新函数执行。

• apply可以直接调用函数，并传递参数列表，立即执行，参数以数组或类数组的形式传递。