JavaScript 中 call、apply 和 bind 方法详解及使用示例

call

函数调用时动态的改变函数的上下文，从而指定函数体内部 this 的指向。

语法：

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

示例：

const obj = {
    name: '小明',
    greeting: function(text) {
        console.log(`${text}, ${this.name}!`)
    }
}

obj.greeting('你好'); // 输出：你好, 小明!

const person = {
    name: '小红'
}

obj.greeting.call(person, '你好'); // 输出：你好, 小红!

这里将 obj.greeting 方法中的 this 绑定到 person 对象上，因此对应的读取 person 中的 name。

apply

apply 和 call 一样也是函数调用时动态的改变函数的上下文，从而指定函数体内部 this 的指向。唯一不同的地方是是参数形式不同，capply 需要通过数组的方式进行传递。

语法：

function.apply(context, [argsArray])

示例：

const obj = {
    name: '小明',
    greeting: function(text) {
        console.log(`${text}, ${this.name}!`)
    }
}

const person = {
    name: '小红'
}

obj.greeting.call(person, ['你好']); // 输出：你好, 小红!

bind

bind 方法不会立即执行函数，它会返回一个新的函数，这个新函数与原函数具有相同的函数体，但是绑定了不同的上下文。

语法：

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

示例：

const obj = {
    name: '小明',
    greeting: function(text) {
        console.log(`${text}, ${this.name}!`)
    }
}

const person = {
    name: '小红'
}

const newFunction = obj.bind(person, '你好')
newFunction() // 输出：你好, 小红!

总结

无论是 call、apply 还是 bind，主要的作用就是改变对象的上下文。

参考

- https://zhuanlan.zhihu.com/p/414153526
- https://juejin.cn/post/7207587475169476667