JavaScript中apply、call、bind的区别与用法

apply()、call()和bind()方法都是Function.prototype对象中的方法，而所有的函数都是Function的实例。三者都可以改变this的指向，将函数绑定到上下文中。

1. 语法

1.1 Function.prototype.apply()

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

1.2 Function.prototype.call()

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。 语法 fun.call(thisArg, arg1, arg2, ...)

1.3 Function.prototype.bind()

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。 语法 fun.bind(thisArg, 队列or数组)()

2. 用法

这三个方法的用法非常相似，将函数绑定到上下文中，即用来改变函数中this的指向。

2.1 普通写法

    let me = {
        name: "me",
        sayHello: function (age) {
                console.log("hello, I am", this.name + " " + age + " " + "years old")
        }
    }
    let someone = {
            name: "someone",
    }
    me.sayHello(24) // hello, I am me 24 years old
复制代码

2.2 call 与apply方法的用法

me.sayHello.apply(someone, [24]) // hello, I am someone 24 years old
me.sayHello.call(someone, 24) // hello, I am someone 24 years old
复制代码

结果相同，call()和apply()，第一个参数都是要绑定上下文，后面的参数是要传递给调用该方法的函数的。不同之处在于，在给调用函数传递参数时，apply()是数组，call()参数是逐个列出的。

2.3 bind()的用法

me.sayHello.bind(someone, 24)() // hello, I am someone 24 years old
me.sayHello.bind(someone, ([24])() // hello, I am someone 24 years old
复制代码

bind方法传递给调用函数的参数可以逐个列出，也可以写在数组中。bind方法与call、apply最大的不同就是前者返回一个绑定上下文的函数，而后两者是直接执行了函数。因此，以上代码也可以这样写：

me.sayHello.bind(someone)(24) // hello, I am someone 24 years old
me.sayHello.bind(someone)([24]) // hello, I am someone 24 years old
复制代码

总结bind()的用法：该方法创建一个新函数，称为绑定函数，绑定函数会以创建它时传入bind()的第一个参数作为this，传入bind()的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

3. 应用场景

3.1 求数组中的最大和最小值

let arr = [1,2,3,89,46]
let max = Math.max.apply(null,arr)//89
let min = Math.min.apply(null,arr)//1
复制代码

3.2将类数组转化为数组

let trueArr = Array.prototype.slice.call(arrayLike)
复制代码

3.3 数组追加

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let total = [].push.apply(arr1, arr2) //6
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]
复制代码

3.4 判断变量类型

function isArray(obj){
    return Object.prototype.toString.call(obj) == '[object Array]'
}
isArray([]) // true
isArray('dot') // false
复制代码

3.5 利用call和apply做继承

function Person(name,age){
    // 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}
function Female(){
    Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了
}
let dot = new Female('Dot',2)
复制代码

3.6 使用 log 代理 console.log

function log(){
  console.log.apply(console, arguments);
}
// 当然也有更方便的 let log = console.log()
复制代码

4. 总结

• (1).三者都可以改变函数的this对象指向。
• (2).三者第一个参数都是this要指向的对象，如果如果没有这个参数，默认指向全局window。
• (3).三者都可以传参，但是apply是数组，而call是有顺序的传入。
• (4).bind 是返回对应函数，便于稍后调用；apply 、call 则是立即执行 。

5. 参考链接

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
• https://www.jianshu.com/p/bc541afad6ee
• https://www.cnblogs.com/xljzlw/p/3775162.html

转载于:https://juejin.im/post/5abf042ef265da23766b690c