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指向，都指向接受的第一个参数。 不同点： 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不是马上执行函数，而是返回该函数和保留该函数的执行上下文。 学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。 个人公众号： 长按保存关注

本文章由javascript技术分享原创和收集