前端战五渣学JavaScript——call、apply以及bind

写这篇博客以前，我想先说下今天（2019年3月28日）一直关注的一件事吧（出于凑热闹的心情——尴尬）。在昨天，全球最大交友网站Github上悄然出现一个名为996.ICU的文档项目，整个项目没有代码，只是列了一些《劳动法》的条款和最近代表实行996工做制的公司。原本觉得是一个小打小闹的抱怨，结果今天中午再看的时候star数已经有30k以上，而且issues达到5000+。下午更是势如破竹，在Github的star排行榜上，一路过五关斩六将，截止目前，这个出现不到24小时的项目，坐拥63k的star，而且排行榜第21名。为何一个这么简单的项目会异军突起，伴着屠榜的架势，一发不可收拾。也许这只是触动了被强行996工做的朋友们，以及无休止的加班没有回报的程序员们心中那最敏感的神经，可能迫于生计问题，现实生活中只能忍气吞声，但当出现一个虚拟的世界可让你尽情发泄的时候，心中的苦水倾泻而出，造就了这个怪异的项目。咱们不是不能接受996，是要实行996工做制公司得付的出相应的报酬，这让员工感受本身的付出是有回报的，既没有相应的酬劳，又没有本身的时间，怨气只会越攒越多。咱们如今能作什么：1、尽可能不去996的公司，让996的公司无人可招；2、提升本身的技术水平，让本身拥有议价的主导权，非要实行996，能谈出你能够接受的薪酬。以上是我我的见解，不喜勿喷。（仍是那句。。。钱给到位，住公司都行）

What is this？

What is this？这是什么？this是什么？（黑人问号脸）
今天的主题（😍？）是call、apply以及bind，这里这个以及我以为用的很好，后面我会解释为何不把bind和call、apply归为一类。

this对象是在运行时基于函数的执行环境绑定的（抛开箭头函数）
当函数被做为某个对象的方法调用时，this等于那个对象
this等于最后调用函数的对象

让咱们来for example ⬇️

var name = 'Jack Sparrow';

function sayWhoAmI() {
  console.log(this.name)
}

sayWhoAmI(); // Jack Sparrow

var onePiece = {
  name: 'Monkey·D·Luffy',
  sayWhoAmI: function () {
    console.log(this.name)
  }
};

onePiece.sayWhoAmI(); // Monkey·D·Luffy
复制代码

上面的代码咱们能够看出，无论定义在哪的sayWhoAmI()方法，函数体是同样的，onePiece.sayWhoAmI()根据上面说的能够理解：
∵（由于，下同）调用方法的最后那个对象就是onePiece
∴（因此，下同）this是onePiece，this.name就是onePiece.name
可是为何全局定义的sayWhoAmI方法输出的是Jack Sparrow，那我换种写法可能你们就明白了 ⬇️

var name = 'Jack Sparrow';

function sayWhoAmI() {
  console.log(this.name)
}

- sayWhoAmI(); // Jack Sparrow
+ window.sayWhoAmI(); // Jack Sparrow
复制代码

这样是否是清晰明了了
∵ 在全局声明的变量或者函数，都是在window或者globle这个对象里的
∴ 在window全局下声明的sayWhoAmI能够输出同是window全局下声明的name

小进阶

简单的咱们已经明白了，如今咱们来看看加入return的方法，我以为算是有点难度的了，大佬请飘过 ⬇️

var area = 'East Ocean';

var onePiece = {
  area: 'New World',
  tellMeWhereAreYou: function () {
    return function () {
      console.log(this.area);
    }
  }
};

onePiece.tellMeWhereAreYou()(); // East Ocean
// 若是看不懂这里为何执行两次，或者不明白为何输出的全局变量
// 那我引入一个中间变量，让过程多一步就能看懂了
var grandLine = onePiece.tellMeWhereAreYou();
// 这时候的 grandLine = function() { console.log(this.area); }，等于onePiece.tellMeWhereAreYou();返回的函数
// 由于grandLine是一个全局变量，因此this.area返回的是East Ocean
grandLine(); // East Ocean
复制代码

上面我以为用了言简意赅的方法解释了一下这个问题，由于这个涉及到闭包的知识，以及函数的活动对象，不明白的能够看个人另外一篇博客《前端战五渣学JavaScript——闭包》，若是还不懂，还想更深刻的了解能够自行翻阅《JavaScript高级程序设计》有关闭包的7.2章节，弄明白7.2章节中的两张图。

那么如今问题来了，我怎么才能让这个函数输出我对象内部的area: 'New World' ⬇️

var area = 'East Ocean';

var onePiece = {
  area: 'New World',
  tellMeWhereAreYou: function () {
    var that = this;
    // 咱们经过声明一个变量来保存this所指向的对象，而后再闭包中，就是返回的函数中使用
    // 一个典型的闭包结构就完成了
    return function () {
      console.log(that.area);
    }
  }
};

onePiece.tellMeWhereAreYou()(); // New World
复制代码

可能你们以前工做中会用到中间变量来保存this的这种方法，并且我感受也不难，那我就跳过了。

咱们如今应该大致搞明白了this指向的问题了。可是咱们就是变态，咱们有病，咱们终于搞明白了this的指向问题，那咱们如今又想改变this指向，😜人生到处是艰难啊

这时候咱们就须要用到标题中提到的call和apply

Apply nothing and just call me

call()方法与apply()方法的做用相同，它们的区别仅在于接收参数的方式不一样。————————《JavaScript高级程序设计》

书里面说的很清楚，它们两个的做用是同样的，只是接收参数的方式不一样，那到底有什么区别呢，听我我细细道来

疯狂打call

call()方法能够指定一个this的值（第一个参数），而且分别传入参数（第一个参数后面的就是须要传入函数的参数，须要一个一个传）

call()方法到底有什么用呢，天然是解决咱们刚才提出来的改变this指向，怎么用呢？？？⬇️

var first = '大黑刀·夜',
    second = '二代鬼彻',
    third = '初代鬼彻',
    fourth = '时雨';

var zoro = {
  first: '和道一文字',
  second: '三代鬼彻',
  third: '雪走',
  fourth: '秋水'
};

function sayYourWeapon(num, num2) {
  console.log(`这是我${num}获得的刀"${this[num]}"`)
  console.log(`这是我${num2}获得的刀"${this[num2]}"`)
}

sayYourWeapon('first', 'third'); // 这是我first获得的刀"大黑刀·夜"；这是我third获得的刀"初代鬼彻"
sayYourWeapon.call(zoro, 'first', 'fourth'); // 这是我first获得的刀"和道一文字"；这是我fourth获得的刀"秋水"
复制代码

上面这段代码很明显的改变了this的指向，若是我直接调用sayYourWeapon()必然输出的是全局全局变量first和third的值，而我后面经过sayYourWeapon.call(zoro, 'first', 'fourth')中的call()方法
∵ 改变了函数中的this值，就是传入的zoro，把this值从全局对象改为了zoro对象
∴ 后面输出的也都是对象zoro中的'first', 'fourth'的值

apply全部配置

apply()方法能够指定一个this的值（第一个参数），而且传入参数数组（参数须要在一个数组或者类数组中）

咱们应该已是知道了call()方法怎么用了，那咱们熟悉apply()就简单多了，咱们能够把上面的例子改一下⬇️

var first = '大黑刀·夜',
  second = '二代鬼彻',
  third = '初代鬼彻',
  fourth = '时雨';

var zoro = {
  first: '和道一文字',
  second: '三代鬼彻',
  third: '雪走',
  fourth: '秋水'
};

function sayYourWeapon(num, num2) {
  console.log(`这是我${num}获得的刀"${this[num]}"`)
  console.log(`这是我${num2}获得的刀"${this[num2]}"`)
}

sayYourWeapon('first', 'third'); // 这是我first获得的刀"大黑刀·夜"；这是我third获得的刀"初代鬼彻"
- sayYourWeapon.call(zoro, 'first', 'fourth'); // 这是我first获得的刀"和道一文字"；这是我fourth获得的刀"秋水"
+ sayYourWeapon.apply(zoro, ['first', 'fourth']); // 这是我first获得的刀"和道一文字"；这是我fourth获得的刀"秋水"
复制代码

能够看到，我全篇就只是把call改为了apply，而且把以前'first', 'fourth'这么传进去的参数改为了['first', 'fourth']一个数组。若是咱们是在一个函数当中使用，那咱们还能够直接使用arguments这个类数组对象⬇️

var first = '大黑刀·夜',
    second = '二代鬼彻',
    third = '初代鬼彻',
    fourth = '时雨';

  var zoro = {
    first: '和道一文字',
    second: '三代鬼彻',
    third: '雪走',
    fourth: '秋水'
  };

  function sayYourWeapon(num, num2) {
    console.log(`这是我${num}获得的刀"${this[num]}"`)
    console.log(`这是我${num2}获得的刀"${this[num2]}"`)
  }

  function mySayYourWeapon(num, num2) {
    sayYourWeapon.apply(zoro, arguments) // 咱们本身声明一个函数，而且在里面调用apply，这是咱们只须要传入arguments这个参数，而不须要想call那样一个一个传进去了
  }

  sayYourWeapon('first', 'fourth'); // 这是我first获得的刀"大黑刀·夜"；这是我fourth获得的刀"时雨"
  mySayYourWeapon('first', 'fourth'); // 这是我first获得的刀"和道一文字"；这是我fourth获得的刀"秋水"
复制代码

羁bind秘密

文章开头我说过这样一句话⬇️

call、apply以及bind，这里这个以及我以为用的很好

如今咱们就来聊聊这个‘以及’的内涵
我为何说‘以及’呢，由于bind和call、apply这两个方法的使用有一丢丢的不同。上面咱们一个函数调用.call()或者.apply()方法，方法会当即执行，若是函数有返回值会得到返回值，可是bind不同
bind()方法不会当即执行目标函数，而是返回一个原函数的拷贝，而且拥有指定this值和初始函数（为何是指定的，固然是咱们本身传进去的啦）

什么叫原函数的拷贝呢，那咱们先来看一下⬇️

function a() {}

console.log(typeof a.bind() === 'function'); // 返回是true，先证实a.bind()是一个函数
console.log(a.bind()); // 输出function a() {}，跟原函数同样
console.log(a.bind() == a); // false
console.log(a.bind() === a); // false 不论是 === 仍是 == 都是false，证实是拷贝出来一份而不是原先的那个函数
复制代码

上面解释了‘原函数的拷贝’这个问题，那接下来咱们看看bind()怎么使用

结印准备

bind()方法在传参上跟call是同样的，第一个参数是须要绑定的对象，后面一次传入函数须要的参数，以下⬇️

var name = 'Jack Sparrow';

var onePiece = {
  name: 'Monkey·D·Luffy'
};

function sayWhoAmI() {
  console.log(this.name)
}

var mySayWhoAmI = sayWhoAmI.bind(onePiece)

sayWhoAmI(); // Jack Sparrow
mySayWhoAmI(); // Monkey·D·Luffy
复制代码

一个简单的实现，原本输出的是全局变量'Jack Sparrow'，后来通过bind之后绑定上了对象onePiece，因此输出的就是对象onePiece中的nodeMonkey·D·Luffy。

那咱们须要传参的时候怎么办 ⬇️

var first = '大黑刀·夜',
  second = '二代鬼彻',
  third = '初代鬼彻',
  fourth = '时雨';

var zoro = {
  first: '和道一文字',
  second: '三代鬼彻',
  third: '雪走',
  fourth: '秋水'
};

function sayYourWeapon(num, num2) {
  console.log(`这是我${num}获得的刀"${this[num]}"`)
  console.log(`这是我${num2}获得的刀"${this[num2]}"`)
}

// 既然咱们知道bind是返回一个函数，那咱们声明一个变量来接这个函数会看的直观一些
var mySayYourWeapon = sayYourWeapon.bind(zoro, 'first', 'fourth'); // 传入初始参数
var hisSayYourWeapon = sayYourWeapon.bind(zoro); // 只传入目标对象

sayYourWeapon('first', 'third');
mySayYourWeapon(); // 由于咱们当时bind绑定函数的时候已经传入了目标对象zoro和指定的参数，因此这里就不须要传参数了
hisSayYourWeapon( 'first', 'fourth'); // 固然咱们开始bind绑定函数的时候不传入，在调用的时候再传入参数也是能够的
复制代码

上面的代码咱们能够发现mySayYourWeapon和hisSayYourWeapon在bind的时候一个传入了初始的参数，一个没有传入，可是后续调用的时候能够再传

既然是初始化参数，那咱们就能够预设参数一个，而后再传一个——————偏函数（不知道本身理解的对不对，可是确定是有这么个功能，不懂的能够移步MDN web docs的Function.prototype.bind中的偏函数）

印结完了，该出招了

影子模仿术

默认你们到这里已经知道怎么使用bind了，那咱们接下来须要挑战的就是，本身手写一个bind方法，这个能够帮助咱们更清楚的理解bind方法是怎么运做的，而且面试的时候也可能会被问到哦~
下面咱们来看从MDN web docs 的Function.prototype.bind中复制过来的实现，添加了我本身的理解和注释，但愿你们能看懂⬇️

// 判断当前环境的Function对象的原型上有没有bind这个方法，若是没有，那咱们就本身添加一个
if (!Function.prototype.bind) {
  /** * 添加bind方法 * @param oThis 目标对象 * @returns {function(): *} 返回的拷贝函数 */
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // 最接近ECMAScript 5的实现（貌似是这个意思）
      // internal IsCallable function
      // 内部IsCallable函数（🙄什么鬼）
      // 若是当前this对象不是function，就抛出错误，由于只有function才须要实现bind这个方法。。。毕竟是返回函数
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }
    // 声明变量aArgs保存arguments中除了第一个参数的其余参数的数组，由于第一个参数不是函数须要的参数，而是须要绑定的目标对象
    // 这块就用到了call的方法，由于arguments是类数组对象，没有slice这个方法，因此只能从Array那call过来一个使用
    var aArgs = Array.prototype.slice.call(arguments, 1);
    // 保存原先的this对象，是在调用bind的时候没有传入目标对象，那就使用原先的this对象
    var fToBind = this;
    // 声明空函数，在下面的原型中可使用
    var fNOP = function() {};
    // 须要放回的拷贝函数的本体，从最后的return也知道，最后是返回的fBound这个方法
    var fBound  = function() {
        // this instanceof fBound === true时,说明返回的fBound被当作new的构造函数调用
        // 下面就涉及到刚才说的是bind时初始化参数，仍是bind之后调用的时候再传入参数
        return fToBind.apply(
          // 判断原始this对象是否是fBound的实例，或者说this的原型链上有没有fBound
          this instanceof fBound
            // 若是有，就使用原始的this 
          ? this
            // 若是没有，就使用如今的传入的this对象
          : oThis,
          // 获取调用时(fBound)的传参.bind 返回的函数入参每每是这么传递的
          // 这一步就是为了保障在bind时候没有传入参数的时候，调用时候传入的参数能使用上
          aArgs.concat(Array.prototype.slice.call(arguments)));
      };

    // 维护原型关系
    // 判断原始this对象上有没有prototype
    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      // 若是原始this对象上有prototype 就把fNOP的prototype改为this.prototype，fNOP就继承自原始this了
      fNOP.prototype = this.prototype;
    }
    // 下行的代码使fBound.prototype是fNOP的实例,所以
    // 返回的fBound若做为new的构造函数,new生成的新对象做为this传入fBound,新对象的__proto__就是fNOP的实例
    // 既然fNOP是继承自原始this对象的，那这里的这一步就是让拷贝函数也拥有原始this对象的prototype，继承自同一个地方，师出同门
    fBound.prototype = new fNOP();
    // 最后返回被拷贝出来的函数
    return fBound;
  };
}
复制代码

上面的代码中有我添加的注释，方便你们能更好的理解，理解了上面的代码之后，bind方法算是了解的差很少了，其余实现原理上摸清楚了
可能上面的代码注释有点多，看着很费劲，下面贴出没有注释的代码，方便你们复制粘贴调试

if (!Function.prototype.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);
    var fToBind = this;
    var fNOP = function() {};
    var fBound  = function() {
        return fToBind.apply(this instanceof fBound ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
    };
    if (this.prototype) {
      fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();
    return fBound;
  };
}
复制代码

这么看来代码还不算不少就实现了bind方法

人的梦想，是不会完结的，没错吧？

可能 996.ICU 起不到本质上的做用，可是让咱们知道有一群可爱的人跟咱们同样在为生计奔波劳累着，让咱们知道咱们的圈子不小，只是没到团结的时候，敢折腾就不赖，人必定要梦想，趁着年轻，万一实现了呢。

带病写博客。。。

年轻嘛，就是干！

ps：博客能够技术分享，也当记录生活了，之后看见的话，没准会说“当时是否是傻”，可是如今感受perfect

---

我是前端战五渣，一个前端界的小学生。