我们在看一些插件的时候，经常会用到这 3 个函数，那么他们具体的用途是什么呢？区别又是什么呢？我们先看看下面一段代码：
var name = '小白'
var obj = {
name: '小明',
getName: function () {
console.log(this, this.name)
return this.name
}
}
var getName = obj.getName
obj.getName()
// obj, 小明
getName()
// window,小白
是不是很神奇，同一个函数，执行的结果不一样，这里涉及到一个this的指向问题。
函数中的this指向
js中一个普通函数this的指向与其本身无关，只与调用该函数的对象有关。根据这个规则，我们回到上面的问题，obj.getName调用getName函数的对象是obj,所以this指向了obj对象，那么得到的obj.name为小明；而getName()是直接调用的函数，实际上是window.geName()是window对象在调用函数，this则指向window对象。（use strict 严格模式下，全局 this 是 undefined，而不是window）。
关于this的指向这里不做具体讲解，毕竟这是个复杂的问题，后面再分情况讲解，毕竟这也是一个高频面试题。
bind、call、apply 的作用
这 3 个函数的作用是，改变一个函数在执行时this的指向。我们来改造上面的代码。
var name = '小白';
var obj = {
name: '小明',
getName: function () {
console.log(this, this.name)
return this.name
}
};
var obj1 = {name: '小花'}
var getName = obj.getName;
getName();
// window,小白
obj.getName();
// obj, 小明
getName.apply(obj);
// obj,小明
getName.call(obj1);
// obj1,小花
getName.bind(obj)();
// obj,小明
可以看到，当我们改用apply去调用函数时，不管其所在的作用域，我们的this指向bind,apply,call函数接受的第一个参数。
相同点与不同点
相同点：三个函数都是为了改变被调用函数的this指向，都指向接受的第一个参数。
不同点：
-
apply和call都是直接调用函数，而bind则是先将函数暂存起来，需要再单独调用一次。 -
apply和call第一个参数一样，都是要绑定给 this 的值，如果这个值为null或者undefined，则为window对象。他们的区别在第二个参数上：当函数需要传递多个变量时,apply可以接受一个数组作为参数输入,call则是接受一系列的单独变量。当参数个数已知的时候可以用call，而当参数个数不确定的时候可以用apply。 -
bind和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。bind方法不会立即执行，而是返回一个改变了上下文this后的函数。而不会影响原函数中的this指向。
最后我们再看一个完整的实例来表现这个三个函数的用途和区别：
function sub(a, b) {
const sub = a + b
console.log(sub)
return sub
}
sub.call(null, 1, 2)
sub.apply(null, [1, 2])
sub.bind(null, 1, 2)()
可以看到，call和apply参数不一样，而bind参数和call一样，但还需要单独调用一下函数。
应用场景
求数组中的最大和最小值
var arr = [0,8,3,46]
var max = Math.max.apply(null,arr);//46
var min = Math.min.apply(null,arr);//0
// 等价于
var max = window.Math.max(...arr);
var min = window.Math.min(...arr);
这里利用
apply的第二个参数是接受一个数组，而在调用函数的时候会自动展开这个数组，而max和min方法接受参数的形式是(1,2,3,4)。
将 arguments 等类数组转换为数组
var trueArr = Array.prototype.slice.call(arguments,0,arguments.length)
判断变量类型
function isArray(obj){
return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('dot') // false
使用 log 代替 console.log
function log(){
console.log.apply(console, arguments);
}
以上用途参考：call、apply 和 bind 方法的用法以及区别
总结
call、apply、bind都是为了改变当前要执行函数this指向，由第一个参数决定，为null或者undefined时则为window对象。call和apply的参数有区别。而bind不是马上执行函数，而是返回该函数和保留该函数的执行上下文。
学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。