bind函数_前端面试必备：JavaScript中call、apply和bind的用法总结

在面试过程中我们经常会被问到JavaScript中关于call、apply和bind的相关问题，比如

• call、apply和bind的区别和应用场景

• 如何利用call、apply来做继承

• call、apply和bind的源码实现原理

• 怎么利用call、apply来求一个数组中最大或者最小值

我们知道在JavaScript中call和apply以及bind都可以改变this指向，那么它们是怎么实现的呢？彼此之间有什么区别呢？今天我们就来总结一下这些内容。

一、call方法

首先，介绍一下call方法的使用：call(thisObj, arg1, arg2, arg3, arg4)

var value = 'window';var obj = {  value: 'obj'}function showNum(numA, numB) {  console.log(this.value);  console.log(numA + numB);}showNum(10,100); //window 110showNum.call(obj,10,100); //obj 110showNum.call(null,10,100); //window  110

根据输出结果可以看出：

1.call方法是函数调用的
2.call方法的第一个参数thisObj用于改变this指向，但是如果传入null/undefined值，this会指向window
3.call方法需要把实参按照形参的个数传进去

根据上面call的使用方法和它的规则，我们可以自己封装一个call方法

Function.prototype.myCall = function () {  var ctx = arguments[0] || window;  ctx.fn = this;//谁调用myCall方法，this就指向谁  //由于使用call方法的时候，参数的个数是不确定的，但是我们现在又想执行fn方法,可以使用eval来实现  //也就是eval('ctx.fn(arguments[1],arguments[2]....'),这里使用一个args数组来拼接arguments[1],arguments[2].....字符串  var args = [];  for (var i = 1; i < arguments.length; i++) {    args.push('arguments[' + i + ']');  }  var result = eval('ctx.fn(' + args.join(',') + ')');  delete ctx.fn;  return result;}showNum.myCall(obj, 10, 100);

二、apply方法

apply方法：apply(thisObj, [args])，同样通过一段代码介绍下如何使用

var value = 'window';var obj = {  value: 'obj'}function showNum(numA, numB) {  console.log(this.value);  console.log(numA + numB);}showNum(10,100); //window 110showNum.apply(obj,[10,100]); //obj 110showNum.apply(null,[10,100]); //window  110showNum.apply(null,10,100);//Uncaught TypeError: CreateListFromArrayLike called on non-object

根据代码输出结果，我们可以得出：

1、apply方法与call方法十分相似，只是传参列表不同，需要传入数组或者列表
2、apply方法的第一个参数thisObj用于改变this指向，但是如果传入null/undefined值，this会指向window
3、apply方法的第二个参数需要传入一个实参列表，也就是arguments

同样我们也可以自己封装一个call方法

 Function.prototype.myApply = function (ctx, arr) {   ctx = ctx || window;   ctx.fn = this;   var result;   if (arr) {     var args = [];     for (var i = 0; i < arr.length; i++) {       args.push('arr[' + i + ']');     }     result = eval('ctx.fn(' + args.join(',') + ')');    } else {     result = ctx.fn();   }   delete ctx.fn;   return result; }showNum.myApply(null,[10,100]);

三、bind方法

bind方法是事先把函数的this改变为我们要想要的结果，并且把对应的参数值准备好，以后要用到了，直接的执行即可，也就是说bind同样可以改变this的指向，但和apply、call不同就是不会马上的执行。

通过一段代码来介绍如何使用：

var value = 'window';var obj = {  value: 'obj'};Parent.prototype.value = 'parent';function Parent() {}Child.prototype = new Parent();function Child() {}function show(name, age) {  console.log(this.value, name, age);}show();//window undefined undefinedvar newShow1 = show.bind(obj);newShow1();//obj undefined undefinedvar newShow2 = show.bind(null);newShow2();//window undefined undefinedvar newShow3 = show.bind(obj, 'test');//函数拥有预设的初始参数newShow3();//obj test undefinednew newShow3();//undefined test  undefinedvar oS = Child.bind(obj);var fn = new oS();console.log(fn, fn.value);//Child{} "parent" 当使用new 操作符调用绑定函数时，参数obj无效。

根据运行结果，我们可以总结一下bind的用法

1、bind函数会创建一个新函数(称为绑定函数)，新函数与被调函数(绑定函数的目标函数)具有相同的函数体

2、bind方法的第一个参数也是用于改变this指向，如果传入null/undefined，this会指向window

3、一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略

4.bind方法可以使函数拥有预设的初始参数。这些参数(如果有的话)作为bind()的第二个参数跟在this(或其他对象)后面，之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面。

bind这个方法在IE6~8下不兼容。

现在来封装一个自己的bind方法吧

Function.prototype.myBind = function (target) {target = target || window;//如果没有传入,就为windowvar self = this;//谁调用myBind，this就指向谁var args = [].slice.call(arguments, 1);//args:[arguments[1],arguments[2]....]var temp = function () { };var fn = function () {  var fnArgs = [].slice.call(arguments, 0);  //this 如果new fn()  this 指向构造出来的对象，否则为window ;  //this instanceof fn看this的原型链上有没有fn的原形 return self.apply(this instanceof fn ? this : target, args.concat(fnArgs));}temp.prototype = this.prototype;fn.prototype = new temp();  //形成继续关系  fn.prototype.__proto__ == this.prototype  truereturn fn;}var newShow5 = show.myBind(obj, 'test1');newShow5(1);//obj test1 1var test = Child.bind(obj);var fn = new test();console.log(fn, fn.value);//Child {} "parent"

四、call、apply与bind的区别

由于call、apply与bind都是属于Function.prototype对象下的方法，所以每个function实例都拥有有call、apply与bind属性，三个函数存在的意义就是改变函数执行时的上下文，即改变函数运行时的this指向。

1、相同点：

都是为改变this指向而存在的。

三者的参数允许是各种类型，包括函数 、 object 等等！

2、异同点：

使用call()方法时，传递给函数的参数必须逐个列举出来。使用apply()方法时，传递给函数的是参数数组。bind()和call()很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。bind() 方法不会立即执行，而是返回一个改变了上下文 this后的函数，用于稍后调用。 call()、apply()则是立即调用