温故而知新：JavaScript中call，apply和bind的用法

前言

apply和call，bind三个都是Function原型上的方法, 它们最主要的作用是改变函数this的指向以及借用构造函数的方法，在实际开发的场景中用到的并不是特别多，主要用在一些封装的基础类或公共库里面。

call

call方法可以传递多个参数

Function.call(obj,[param1[,param2[,…[,paramN]]]])

• 第一个参数：表示被调用函数新的this指向

• 后续参数：调用函数时传递的参数，以逗号分隔，可传递多个

Function.prototype.call = function(context) {
    var context = context || window
    var args = [...arguments].slice(1)
    context.fn = this
    var result = context.fn(...args)
    delete context.fn
    return result
}
const obj = {
    title: 'hi',
    showTitle(name) {
        console.log(this.title + ' ' + name)
    }
}
const obj1 = {
    title: 'hello'
}
obj.showTitle('tim') // hi tim
obj.showTitle.call(obj1, 'tony') // hello tony

apply

apply函数功能与call一样，只是传递的参数有所不同，apply只传递两个参数

Function.apply(obj[,argArray])

• 第一个参数：表示被调用函数新的this指向

• 第二个参数：表示传递的参数，类型为数组或类数组，不是字符串

Function.prototype.apply = function(context) {
    var context = context || window
    var args = arguments[1] || []
    context.fn = this
    const result = context.fn(...args)
    delete context.fn
    return result
}
const obj = {
    title: 'hi',
    showTitle(name) {
        console.log(this.title + ' ' + name)
    }
}
const obj1 = {
    title: 'hello'
}
obj.showTitle('tim') // hi tim
obj.showTitle.call(obj1, ['tony']) // hello tony

bind

bind函数与call用法一致，只不过调用后不会立即执行函数，而是把被调用的函数返回，后续再去调用执行

Function.bind(thisArg[, arg1[, arg2[, ...]]])
``

+ 第一个参数：表示被调用函数新的this指向

+ 后续参数：调用函数时传递的参数，以逗号分隔，可传递多个

```js
Function.prototype.bind = function(contex) {
    var context = context || window
    var args = [...arguments].slice(1)
    context.fn = this
    return function() {
        return context.fn(...args)
    }
}
const obj = {
    title: 'hi',
    showTitle(name) {
        console.log(this.title + ' ' + name)
    }
}
const obj1 = {
    title: 'hello'
}
obj.showTitle('tim') // hi tim
const myFun = obj.showTitle.bind(obj1, 'tony') // 返回函数
myFun() // hello tony