bind 是返回对应函数，便于稍后挪用；apply 、call 则是马上挪用 。

apply、call

在 javascript 中，call 和 apply 都是为了转变某个函数运转时的上下文（context）而存在的，换句话说，就是为了转变函数体内部 this 的指向。
JavaScript 的一大特点是，函数存在「定义时上下文」和「运转时上下文」以及「上下文是可以转变的」如许的观点。

function fruits() {}
 
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
 
var apple = new fruits;
apple.say();    //My color is red

然则假如我们有一个对象banana= {color : “yellow”} ,我们不想对它从新定义 say 要领，那末我们可以经由过程 call 或 apply 用 apple 的 say 要领：

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

所以，可以看出 call 和 apply 是为了动态转变 this 而涌现的，当一个 object 没有某个要领（本栗子中banana没有say要领），然则其他的有（本栗子中apple有say要领），我们可以借助call或apply用别的对象的要领来操纵。

apply、call区分

关于 apply、call 两者而言，作用完整一样，只是接收参数的体式格局不太一样。比方，有一个函数定义以下：

var func = function(arg1, arg2) {
     
};

就可以经由过程以下体式格局来挪用：

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

个中 this 是你想指定的上下文，他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 须要把参数按递次通报进去，而 apply 则是把参数放在数组里。　　
为了稳固加深影象，下面枚举一些经常运用用法：

apply、call实例

数组之间追加

var array1 = [12 , "foo" , {name:"Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.apply(array1, array2); 
//array1 值为  [12 , "foo" , {name:"Joe"} , -2458 , "Doe" , 555 , 100] 

猎取数组中的最大值和最小值

var  numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers),   //458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

number 自身没有 max 要领，然则 Math 有，我们就可以借助 call 或许 apply 运用其要领。

考证是不是是数组（条件是toString()要领没有被重写过）

functionisArray(obj){ 
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

类（伪）数组运用数组要领

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

Javascript中存在一种名为伪数组的对象组织。比较迥殊的是 arguments 对象，另有像挪用 getElementsByTagName , document.childNodes 之类的，它们返回NodeList对象都属于伪数组。不能运用 Array下的 push , pop 等要领。
然则我们能经由过程 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象，如许 domNodes 就可以运用 Array 下的一切要领了。

面试题

定义一个 log 要领，让它可以代办 console.log 要领，罕见的处置惩罚要领是：

function log(msg)　{
  console.log(msg);
}
log(1);    //1
log(1,2);    //1

上面要领可以处置惩罚最基本的需求，然则当传入参数的个数是不确定的时刻，上面的要领就失效了，这个时刻就可以斟酌运用 apply 或许 call，注重这里传入多少个参数是不确定的，所以运用apply是最好的，要领以下：

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

接下来的要求是给每个 log 音讯增加一个”(app)”的前辍，比方：

log("hello world");    //(app)hello world

该怎么做比较文雅呢?这个时刻须要想到arguments参数是个伪数组，经由过程 Array.prototype.slice.call 转化为规范数组，再运用数组要领unshift，像如许：

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
 
  console.log.apply(console, args);
};

bind

在议论bind()要领之前我们先来看一道题目：

var altwrite = document.write;
altwrite("hello");

效果：Uncaught TypeError: Illegal invocation
altwrite()函数转变this的指向global或window对象，致使实行时提醒不法挪用非常，准确的计划就是运用bind()要领：

altwrite.bind(document)("hello")

固然也可以运用call()要领：

altwrite.call(document, "hello")

绑定函数

bind()最简朴的用法是建立一个函数，使这个函数不论怎么挪用都有一样的this值。罕见的毛病就像上面的例子一样，将要领从对象中拿出来，然后挪用，而且愿望this指向本来的对象。假如不做特别处置惩罚，平常会丧失本来的对象。运用bind()要领可以很漂亮的处置惩罚这个题目：

this.num = 9; 
var mymodule = {
  num: 81,
  getNum: function() { 
    console.log(this.num);
  }
};

mymodule.getNum(); // 81

var getNum = mymodule.getNum;
getNum(); // 9, 因为在这个例子中，"this"指向全局对象

var boundGetNum = getNum.bind(mymodule);
boundGetNum(); // 81

bind() 要领与 apply 和 call 很类似，也是可以转变函数体内 this 的指向。

MDN的诠释是：bind()要领会建立一个新函数，称为绑定函数，当挪用这个绑定函数时，绑定函数会以建立它时传入 bind()要领的第一个参数作为 this，传入 bind() 要领的第二个以及今后的参数加上绑定函数运转时自身的参数根据递次作为原函数的参数来挪用原函数。

直接来看看详细怎样运用，在罕见的单体形式中，一般我们会运用 _this , that , self 等保留 this ，如许我们可以在转变了上下文以后继承引用到它。 像如许：

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this;
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(_this.bar);     //1
        });
    }
}

因为 Javascript 特有的机制，上下文环境在 eventBind:function(){ } 过渡到 $(‘.someClass’).on(‘click’,function(event) { }) 发生了转变，上述运用变量保留 this 这些体式格局都是有效的，也没有什么题目。固然运用 bind() 可以越发文雅的处置惩罚这个题目：

var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));
    }
}

在上述代码里，bind() 建立了一个函数，当这个click事宜绑定在被挪用的时刻，它的 this 关键词会被设置成被传入的值（这里指挪用bind()时传入的参数）。因而，这里我们传入想要的上下文 this(实在就是 foo )，到 bind() 函数中。然后，当回调函数被实行的时刻， this 便指向 foo 对象。再来一个简朴的栗子：

var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3

这里我们建立了一个新的函数 func，当运用 bind() 建立一个绑定函数以后，它被实行的时刻，它的 this 会被设置成 foo ， 而不是像我们挪用 bar() 时的全局作用域。

偏函数（Partial Functions）

Partial Functions也叫Partial Applications，这里截取一段关于偏函数的定义：

Partial application can be described as taking a function that accepts some number of arguments, binding values to one or more of those arguments, and returning a new function that only accepts the remaining, un-bound arguments.

这是一个很好的特征，运用bind()我们设定函数的预定义参数，然后挪用的时刻传入其他参数即可：

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 预定义参数37
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

和setTimeout一同运用

function Bloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// 1秒后挪用declare函数
Bloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 100);
};

Bloomer.prototype.declare = function() {
  console.log('我有 ' + this.petalCount + ' 朵花瓣!');
};

var bloo = new Bloomer();
bloo.bloom(); //我有 5 朵花瓣!

注重：关于事宜处置惩罚函数和setInterval要领也可以运用上面的要领

绑定函数作为组织函数

绑定函数也适用于运用new操纵符来组织目的函数的实例。当运用绑定函数来组织实例，注重：this会被疏忽，然则传入的参数依然可用。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function() { 
  console.log(this.x + ',' + this.y);
};

var p = new Point(1, 2);
p.toString(); // '1,2'


var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
// 完成中的例子不支撑,
// 原生bind支撑:
var YAxisPoint = Point.bind(null, 0/*x*/);

var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new Point(17, 42) instanceof YAxisPoint; // true

上面例子中Point和YAxisPoint同享原型，因而运用instanceof运算符推断时为true。

捷径

bind()也可认为须要特定this值的函数制造捷径。

比方要将一个类数组对象转换为真正的数组，能够的例子以下：

var slice = Array.prototype.slice;

// ...

slice.call(arguments);

假如运用bind()的话，状况变得更简朴：

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments);

完成

上面的几个小节可以看出bind()有许多的运用场景，然则bind()函数是在 ECMA-262 第五版才被到场；它能够没法在一切浏览器上运转。这就须要我们本身完成bind()函数了。

起首我们可以经由过程给目的函数指定作用域来简朴完成bind()要领：

Function.prototype.bind = function(context){
  self = this;  //保留this，即挪用bind要领的目的函数
  return function(){
      return self.apply(context,arguments);
  };
};

斟酌到函数柯里化的状况，我们可以构建一个越发硬朗的bind()：

Function.prototype.bind = function(context){
  var args = Array.prototype.slice.call(arguments, 1),
  self = this;
  return function(){
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply(context,finalArgs);
  };
};

此次的bind()要领可以绑定对象，也支撑在绑定的时刻传参。

继承，Javascript的函数还可以作为组织函数，那末绑定后的函数用这类体式格局挪用时，状况就比较玄妙了，须要涉及到原型链的通报：

Function.prototype.bind = function(context){
  var args = Array.prototype.slice(arguments, 1),
  F = function(){},
  self = this,
  bound = function(){
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply((this instanceof F ? this : context), finalArgs);
  };

  F.prototype = self.prototype;
  bound.prototype = new F();
  return bound;
};

这是《JavaScript Web Application》一书中对bind()的完成：经由过程设置一个中转组织函数F，使绑定后的函数与挪用bind()的函数处于统一原型链上，用new操纵符挪用绑定后的函数，返回的对象也能一般运用instanceof，因而这是最严谨的bind()完成。

关于为了在浏览器中能支撑bind()函数，只须要对上述函数轻微修正即可：

Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(
              this instanceof fNOP && oThis ? this : oThis || window,
              aArgs.concat(Array.prototype.slice.call(arguments))
          );
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };

有个风趣的题目，假如一连 bind() 两次，亦或许是一连 bind() 三次那末输出的值是什么呢？像如许：

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
 
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。缘由是，在Javascript中，屡次 bind() 是无效的。更深条理的缘由， bind() 的完成，相当于运用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次今后的 bind 是没法见效的。

apply、call、bind比较

那末 apply、call、bind 三者相比较，之间又有什么异同呢？什么时候运用 apply、call，什么时候运用 bind 呢。简朴的一个栗子：

var obj = {
    x: 81,
};
 
var foo = {
    getX: function() {
        return this.x;
    }
}
 
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

三个输出的都是81，然则注重看运用 bind() 要领的，他背面多了对括号。

也就是说，区分是，当你愿望转变上下文环境以后并不是马上实行，而是回调实行的时刻，运用 bind() 要领。而 apply/call 则会马上实行函数。

再总结一下：

• apply 、 call 、bind 三者都是用来转变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以应用后续参数传参；
• bind 是返回对应函数，便于稍后挪用；apply 、call 则是马上挪用 。