JS中的call、apply、bind方法详解

目录

1. apply、call、bind
2. 应用场景
3. bind
4. 手动实现bind函数

1. apply、call、bind

---

介绍

在 js 中，每个函数的原型都指向Function.prototype对象（js基于原型链的继承），而call，apply和bind是Function.prototype下的方法，因此每个函数都会有apply，call，和bind方法，这些方法作用一样，都是为了改变某个函数运行时的上下文（context）而存在的，即为了改变函数体内部 this 的指向。

使用

//call 方法第一个参数是要绑定给this的值，第二个参数可选，有的话接收一个参数列表。
//当第一个参数为null、undefined的时候，默认指向window。
A.call(B, x, y, z)

//apply 方法第一个参数是要绑定给this的值，第二个参数可选，有的话是数组形式。
//当第一个参数为null、undefined的时候，默认指向window。
A.apply(B, [x, y, z])

//bind和call很相似，第一个参数是this的指向，第二个参数可选，有的话也是接收参数列表。
//区别在于bind方法返回值是函数，第二个参数是通过返回的函数对象传入。
A.bind(B)(x, y, z)
或者
var C = A.bind(B)
C(x, y, z)

总结一下：
apply 、call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply、call 则会立即执行函数。

示例
1、

var name = "佚名";
var age = 20;
//global.name
//global.age

var p1 = {
    name: "张三",
    age: 16,
    func: function(){
        console.log(`姓名：${this.name}，年龄：${this.age}`)
    }
}

var p2 = {
    name: "李四",
    age: 18
}

p1.func();  //姓名：张三，年龄：16
p1.func.call();  //姓名：佚名，年龄：20
p1.func.apply(p2);  //姓名：李四，年龄：18
p1.func.bind(p2)(); //姓名：李四，年龄：18

1. 当直接调用p1.func方法时，this指向的是当前p1这个对象，因此name和age都是它本身对象的属性值；
2. 当使用call方法，传入的第一个参数为空时，在浏览器环境下，this指向window；在node环境下，this指向global（可自行把name和age改为global.name和global.age验证一下）；
3. 使用apply方法时，把p2传进去，相当于把函数的this指向p2对象，因此，此时打印出来的属性都是p2对象的属性；
4. 使用bind方法时，会生成一个新的函数对象，因此需要手动执行一下这个函数（即在函数末尾加个括号执行）。

2、

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用其它对象的方法来操作。

2. 应用场景

---

• 求数组中的最大和最小值

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1

• 数组之间追加

var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1, arr2);
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]

• 验证是否是数组（前提是toString()方法没有被重写过）

function isArray(obj){
    return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('dot') // false

• 类（伪）数组使用数组方法

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

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象，还有像调用 getElementsByTagName , document.childNodes 之类的，它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。
但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象，这样 domNodes 就可以应用 Array 下的所有方法了。

• 利用call和apply做继承

function Person(name,age){
    // 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayName = function(){
        console.log(this.name, this.age)
    }
}
function Student(){
    Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了
}
var s = new Student('xiaoming',18)
console.log(s.sayName())//xiaoming

• 使用 log 代理 console.log

function log(){
  console.log.apply(console, arguments);
}
// 当然也有更方便的 var log = console.log

//给每一个 log 消息添加一个"(app)"的前辍
function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
  console.log.apply(console, args);
};

• 绑定（不改变）函数对象this指向

//为了不改变this的指向，通常会在函数后边加上bind(this)
//其实，从es6开始，已经支持箭头函数了，建议使用箭头函数，就不会出现this指向的问题了。
function f(){}.bind(this)

3. bind

在讨论bind()方法之前，我们先来看一个例子：

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

结果：Uncaught TypeError: Illegal invocation
原因是altwrite()函数改变this的指向，指向window或global对象，导致执行时提示非法调用异常，正确的方案就是使用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指向window或global对象

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 arr() {
  return Array.prototype.slice.call(arguments);
}

var arr1 = arr(1, 2, 3); // [1, 2, 3]

// 预定义参数10
var _Arr = arr.bind(undefined, 10);

var arr2 = _Arr(); // [10]
var arr3 = _Arr(1, 2, 3); // [10, 1, 2, 3]

和setTimeout一起使用

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

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

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

捷径

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);

4. 手动实现bind函数

上面的几个小节可以看出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 是无法生效的。