call bind apply

call

先给一个官方描述吧：

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

可以让call()中的对象调用当前对象所拥有的function。你可以使用call()来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

一般用法

使用call方法调用匿名函数

在下例中的for循环体内，我们创建了一个匿名函数，然后通过调用该函数的call方法，将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法，这个print方法可以打印出各元素在数组中的正确索引号

var animals = [
  {species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
  (function (i) { 
    this.print = function () { 
      console.log('#' + i  + ' ' + this.species + ': ' + this.name); 
    } 
    this.print();
  }).call(animals[i], i);
}

使用call方法调用函数并且指定上下文的 this

举个栗子：

var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call(foo); // 1

模拟实现

分析

在上面的第二个例子里，注意两点：

• call 改变了 this 的指向，指向到 foo
• bar 函数执行了

试想当调用 call 的时候，把 foo 对象改造成如下：

var foo = {
    value: 1,
    bar: function() {
        console.log(this.value)
    }
};

foo.bar(); // 1

这个时候 this 就指向了 foo，是不是很简单呢？

所以我们模拟的步骤可以分为：

• 将函数设为对象的属性
• 执行该函数
• 删除该函数

模拟第一步

Function.prototype.call1 = function(context) {
  context.fn = this;    //this 指向调用 call1 的函数
  context.fn();
  delete context.fn;
}

//测试一下
var foo = {
    value: 1
};

function bar() {
    console.log(this.value);
}

bar.call2(foo); // 1

注意：

模拟第二步：指定参数

Function.prototype.call1 = function(context) {
  context.fn = this;
  var args = Array.from(arguments).slice(1); 
  //获取arguments（传进来的所有参数），变成数组，并去掉第一个参数（context）
  context.fn(...args);   
  // ...是es6的语法，意思是展开后面的对象或数组
  // 例如： ...[1,2,3,4,5] => 1,2,3,4,5
  delete context.fn;
}

以下是没有 es6 时的替代方法

Function.prototype.call1 = function(context) {
  context.fn = this;
  var args = [];
  for(var i = 1, len = arguments.length; i < len; i++) {
    args.push('arguments[' + i + ']');
  }
  eval('context.fn(' + args + ')');
  delete context.fn;
}

模拟实现第三步

模拟代码已经完成 80%，还有两个小点要注意：

1.this 参数可以传 null，当为 null 的时候，视为指向 window

2.函数是可以有返回值的！

Function.prototype.call1 = function(context) {
  var context = context || window;
  context.fn = this;
  var args = Array.from(arguments).slice(1); 
  //获取arguments（传进来的所有参数），变成数组，并去掉第一个参数（context）
  var result = context.fn(...args);   
  // ...是es6的语法，意思是展开后面的对象或数组
  // 例如： ...[1,2,3,4,5] => 1,2,3,4,5
  delete context.fn;
  
  return result;
}

大功告成！ｂ（￣▽￣）ｄ

apply

和 call 一样，只是参数是以数组的形式给出

模拟实现

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;

    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }

    delete context.fn;
    return result;
}

bind

MDN 的解释：bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。

Function.prototype.bind = function (oThis) {
 if (typeof this !== "function") {
   // closest thing possible to the ECMAScript 5 internal IsCallable 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;
};

call apply bind 区别

call和apply，bind都是用来改变函数中this的指向
不同的是call和apply不仅改变了函数中this的指向并且立即调用了函数而bind仅仅是替换了this没有调用

apply和call的区别在于当Parent有参数的时候call只能一个一个的赋值 apply可以以数组的方式传递
bind体验了js的预处理，预先处理数据 稍后之行