从一行等式理解JS当中的call, apply和bind

写于 2018.04.04

关于JS当中的call，apply和bind，相信你们和我同样，已经看过了无数篇相关的文章，都有本身的理解。因此这篇文章并不是什么科普类的文章，仅仅是把我本身的理解记录下来。

个人学习习惯，是喜欢把各类看似孤立的知识点串联起来，综合理解并运用，经过最简单最直观的思路把它理解透。因此，这篇文章将经过一段很是简洁的等式，把JS当中一个相对较难的知识点，call，apply和bind给串联起来：

cat.call(dog, a, b) = cat.apply(dog, [a, b]) = (cat.bind(dog, a, b))() = dog.cat(a, b)
复制代码

要理解JS当中的这三个关键字，首先得弄清楚它们是用来干吗的。复杂些来讲，能够引用MDN文档的原文：

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

简单些来讲，能够引用你们都看过的一句话：

为了动态改变某个函数运行时的上下文（context）。

又或者是

为了改变函数体内部this的指向

上面这些解释都很正确，说得一点问题都没有，可是里面却又引入了继承，上下文，this这些额外的知识点。若是我只想用最直观的办法去理解这三个关键字的做用，也许能够这么去理解：

定义一个猫对象：

class Cat {
  constructor (name) {
    this.name = name
  }

  catchMouse(name1, name2) {
    console.log(`${this.name} caught 2 mouse! They call ${name1} and ${name2}.`)
  }
}
复制代码

这个猫对象拥有一个抓老鼠的技能catchMouse()。

而后相似的，定义一个狗对象：

class Dog {
  constructor (name) {
    this.name = name
  }

  biteCriminals(name1, name2) {
    console.log(`${this.name} bite 2 criminals! Their name is ${name1} and ${name2}.`)
  }
}
复制代码

这个狗对象可以咬坏人biteCriminal()。

接下来，咱们实例化两个对象，分别获得一只叫“Kitty”的猫和叫“Doggy”的狗：

const kitty = new Cat('Kitty')
const doggy = new Dog('Doggy')
复制代码

首先让它们彼此发挥本身的技能：

kitty.catchMouse('Mickey', 'Minnie')
// Kitty caught mouse! They call Mickey and Minnie.

doggy.biteCriminal('Tom', 'Jerry')
// Doggy bite a criminal! Their name is Tom and Jerry.
复制代码

如今，咱们但愿赋予Doggy抓老鼠的能力，若是不使用这三个关键字，应该怎么作呢？

方案A：修改Dog对象，直接为其定义一个和Cat相同的抓老鼠技能。

方案B：让Doggy吃掉Kitty，直接消化吸取Kitty的全部能力。

其实方案A和方案B的解决办法是相似的，也是须要修改Dog对象，不过方案B会更简单粗暴一点：

class Dog {
  constructor (name, kitty) {
    this.name = name
    this.catchMouse = kitty.catchMouse
  }

  biteCriminals(name1, name2) {
    console.log(`${this.name} bite 2 criminals! Their name is ${name1} and ${name2}.`)
  }
}

const kitty = new Cat('Kitty')
const doggy = new Dog('Doggy', kitty)

doggy.catchMouse('Mickey', 'Minnie')
// Doggy caught 2 mouse! They call Mickey and Minnie.
复制代码

上面这种方法实在是太不优雅，每每不少时候在定义Dog对像的时候根本就没有打算过要为它添加抓老鼠的方法。那么有没有一种办法可以在不修改Dog对象内容的前提下，让Doggy实例也可以拥有抓老鼠的办法呢？答案就是使用call，apply或者bind关键字：

kitty.catchMouse.call(doggy, 'Mickey', 'Minnie')

kitty.catchMouse.apply(doggy, ['Mickey', 'Minnie'])

const doggyCatchMouse = kitty.catchMouse.bind(doggy, 'Mickey', 'Minnie')
doggyCatchMouse()

// Doggy caught 2 mouse! They call Mickey and Minnie.
// Doggy caught 2 mouse! They call Mickey and Minnie.
// Doggy caught 2 mouse! They call Mickey and Minnie.
复制代码

反过来，让Kitty拥有咬坏人的能力，也能够经过这种办法实现，读者能够自行尝试。

看到这里，相信读者已经可以明白call，apply和bind的区别及做用，反过来再查看各自的概念，应该也可以更容易理解。

回到文章开头的等式：

cat.call(dog, a, b) = cat.apply(dog, [a, b]) = (cat.bind(dog, a, b))() = dog.cat(a, b)
复制代码

这里的“等号”其实并不严谨，由于三个关键字的区别及背后的原理确定不是区区一个等号就可以归纳的，可是对于概念的理解以及实际状况下的运用来讲，这条等式未必不是一个好的思路。