一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别

JavaScript中apply、call、bind三者的用法及区别

• 引言
• 正文
• 1、apply、call、bind的共同用法
• 2、 apply
• 3、 call
• 4、 bind
• 5、其余应用场景
• 6、总结
• 结束语

引言

这是个人第一篇前端面试题文章，也是用来帮助本身巩固复习知识， 在以后但愿拿到本身满意的offer，这第一篇讲的就是一道常见的面试题，关于JavaScript中apply、call、bind三者的用法及区别。

正文

若是有不想看过程的小伙伴能够直接跳到 总结

1、apply、call、bind的共同用法

先将一下特别概念性的，三者的共同用法就是能够改变函数的this指向，将函数绑定到上下文中。接下来看一个普通的应用场景：

let obj1 = {
    my_favorite : 'banana',
    add: function (fruit) {
        console.log('我喜欢的水果是' + fruit + ',可是我最爱的水果是' + this.my_favorite)
    }
}

let obj2 = {
	my_favorite: 'orange'
}

obj1.add('apple')
//输出结果为： 我喜欢的水果是apple,可是我最爱的水果是banana

能够看到最后一行代码咱们调用了obj1中的add函数，并传入了一个参数apple。add函数中的 this 指的是他所在的对象obj1，因此this.my_favorite 就是banana， 可是咱们若是想得到obj2中的my_favorite， 该怎么办呢？接下来看一下每一个函数的用法吧~

2、 apply

语法：fun.apply(obj,[arry])

• 第一个参数： 传入的是this须要指向的对象
• 第二个参数： 传入的是一个数组，做为 fun 函数的参数

let obj1 = {
    my_favorite : 'banana',
    add: function (...fruit) {  //...fruit 表示的意思是可接收多个参数
        console.log('我喜欢的水果是' + fruit + ',可是我最爱的水果是' + obj2.my_favorite)
    }
}

let obj2 = {
    my_favorite: 'orange'
}


obj1.add.apply(obj2, ['apple', 'Watermelon'])
//输出结果为：我喜欢的水果是apple,Watermelon,可是我最爱的水果是orange

obj1.add.apply(obj2, ['apple', 'Watermelon'])
这一行代码， 第一个参数将obj1中的add函数的 this 指向了obj2 ， 第二个参数以数组形式传入多个参数，做为 obj1 中的 add 函数传入的参数， 因此最后能将 apple 和 watermelon 都输出。

3、 call

语法：fun.call(obj,[arg1, arg2, arg3...,argN]

• 第一个参数： 传入的是this须要指向的对象
• 其他参数： 除了第一个参数，其余的参数都是做为 fun 的传入参数

call 和 apply 惟一的区别就是在于给 fun 函数传入参数的形式不一样， call是将多个参数逐个传入， apply 是 将多个参数放在一个数组中，一块儿传入

话很少说，直接来看看 call 的例子：

let obj1 = {
    my_favorite : 'banana',
    add: function (...fruit) {
        console.log('我喜欢的水果是' + fruit + ',可是我最爱的水果是' + obj2.my_favorite)
    }
}

let obj2 = {
    my_favorite: 'orange'
}


obj1.add.call(obj2, 'apple', 'Watermelon')
//输出结果为：我喜欢的水果是apple,Watermelon,可是我最爱的水果是orange

你们能够对比一下 call 和 apply 的区别到底在哪里

4、 bind

语法：fun.bind(obj)(arg)

• bind的第一个参数：传入的是this须要指向的对象
• 由于函数bind返回的是一个函数，即将 fun 的 this 指向 obj 后不进行自身调用， 咱们须要本身进行一次调用， 因此要在函数bind后面再加一个小括号进行自身调用， 而小括号里则能够输出传给 fun 函数的参数， 输入的能够是数组形式的，也能够是逐个传入的。

简单看一下例子：

let obj1 = {
    my_favorite : 'banana',
    add: function (...fruit) {
        console.log('我喜欢的水果是' + fruit + ',可是我最爱的水果是' + obj2.my_favorite)
    }
}

let obj2 = {
    my_favorite: 'orange'
}


obj1.add.bind(obj2)('apple', 'Watermelon')
obj1.add.bind(obj2)(['apple', 'Watermelon'])
//输出结果为：我喜欢的水果是apple,Watermelon,可是我最爱的水果是orange
//输出结果为：我喜欢的水果是apple,Watermelon,可是我最爱的水果是orange

能够很清楚的看到， bind 有点相似 apply 和 call 的结合，只不过它返回的是一个函数，须要本身进行一下调用， 而传给 fun 函数的参数形式能够是像 apply 同样的数组形式， 也能够是像 call 同样的逐个传入的形式。

5、其余应用场景

• 获取一个数组中的最大值或最小值

/* 普通状况，咱们是这样获取数组中的最大值、最小值的 */

let max = Math.max(22, 33, 54, 88, 35, 44, 78, 80)
let min = Math.min(22, 33, 54, 88, 35, 44, 78, 80)
console.log(max, min)
//88 22

有没有感受特别的麻烦，那接下来看看使用了这几个函数以后是什么样子的吧

/* 使用函数apply */
let arr = [22, 33, 54, 88, 35, 44, 78, 80]
let max = Math.max.apply(null, arr)
let min = Math.min.apply(null, arr)
console.log(max, min)
//88 22

这样看着是否是特别的简洁，由于咱们不须要把arr 中的数组一个个传入进行比较，而是直接以数组形式传入就能够了。

6、总结

1. apply、call、bind 三者都是能够改变函数的this指向的
2. apply 和 call 都是改变函数this指向，并传入参数后当即调用执行该函数
3. bind 是在改变函数this指向，并传入参数后返回一个新的函数，不会当即调用执行
4. apply 传入的参数是数组形式的；call 传入的参数是按顺序的逐个传入并以逗号隔开； bind 传入的参数既能够是数组形式，也能够是按顺序逐个传入。

结束语

apply、call、bind三者的用法及区别是常常考到的一道面试题，但愿对你们有所帮助。以后我还会天天更新一个前端面试题，来帮助你们以及我本身巩固知识点，喜欢的小伙伴能够点个关注， 但愿大家都拿到本身满意的offer