bind、call、apply的区别与用法？

咱们在看一些插件的时候，常常会用到这 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指向，都指向接受的第一个参数。
不一样点：

1. apply和call都是直接调用函数，而bind则是先将函数暂存起来，须要再单独调用一次。
2. apply和call第一个参数同样，都是要绑定给 this 的值，若是这个值为null或者undefined，则为window对象。他们的区别在第二个参数上：当函数须要传递多个变量时, apply能够接受一个数组做为参数输入, call 则是接受一系列的单独变量。当参数个数已知的时候能够用call，而当参数个数不肯定的时候能够用apply。
3. 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不是立刻执行函数，而是返回该函数和保留该函数的执行上下文。

学习如逆水行舟，不进则退，前端技术飞速发展，若是天天不坚持学习，就会跟不上，我会陪着你们，天天坚持推送博文，跟你们一同进步，但愿你们能关注我，第一时间收到最新文章。

我的公众号：