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

CarterLi 发布于2019-08-22 16:01 / 1034人阅读

摘要：所以，这篇文章将通过一段非常简洁的等式，把当中一个相对较难的知识点，，和给串联起来要理解当中的这三个关键字，首先得弄清楚它们是用来干嘛的。方案让吃掉，直接消化吸收的所有能力。

关于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)

这里的“等号”其实并不严谨，因为三个关键字的区别及背后的原理肯定不是区区一个等号就能够概括的，但是对于概念的理解以及实际情况下的运用来说，这条等式未必不是一个好的思路。

云服务器私有云 JS中bind、call和apply的作 js中的call和apply apply与call的区别 js的apply()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93964.html

看完这篇文章还不会call/apply/bind的来找我。

摘要：关于的指向的问题请参照我的学习笔记。那么在这里事实上都改变了函数方法被调用时的指向。那么回调函数在执行的时候指向还是。大家看完之后应该已经懂了把还是不懂的话在评论区留言，我给大家解答。先从一个小题目开始吧：要实现一个加法函数，这个时候向函数当中传递个数大于0的若干个整形数据，求所有这些数据的和。 Function.prototype.call Function.prototype...

Java3y 2019-08-20 11:14 评论0 收藏0
JavaScript函数（二）

摘要：目录函数的声明函数的属性和方法函数的作用域闭包知识点小结关于函数，可以从以下个方面去理解首先，数据类型上看函数在中是一种数据类型，是对象的一种其次，从功能上看函数本质上是一段反复调用的代码块最后，从地位上看函数在中和其他基本数据类型一样，可目录 1.函数的声明 2.函数的属性和方法 3.函数的作用域 4.闭包知识点 5.小结关于函数，可以从以下3个方面去理解：首先，数据类型上看：...

用户84 2019-08-21 11:20 评论0 收藏0
Know this, use this! (总结 this 的常见用法)

摘要：而当做普通函数调用的话，实际上即第种情况下，对函数普通调用，此时的指向这是正常情况下，会正确返回并且指向该对象，但是在构造函数当中，如果返回了一个对象，那么会指向返回的那个对象。 this应该是一个讨论了很久的话题了。其中，关于this的文章，在很多的博客当中也有很多介绍，但是，以前我都是一知半解的去了解它，就是看博客当中，只介绍了一些情况下的 this 的使用方式，但是也并没有自己去...

zorro 2019-08-21 14:21 评论0 收藏0
万水千山总是情，看看this行不行

摘要：回顾一下关键词的过程创建一个新的对象使得的指向构造函数的原型对象执行构造函数中的，改变的指向为如果结果是对象类型，则返回结果，否则返回指向的是调用时传递的第一个参数。 this = ？在JS中，当一个函数执行时，都会创建一个执行上下文用来确认当前函数的执行环境，执行上下文分为全局执行上下文和函数执行上下文。而 this 就是指向这个执行上下文的对象。所以，this是在运行时决定的...

lemanli 2019-08-26 18:37 评论0 收藏0
如何理解JavaScript的this关键字

摘要：原文链接参考深入理解原型和闭包完结王福朋博客园中的作用域详解博客园前言王福朋老师的 JavaScript原型和闭包系列文章看了不下三遍了，最为一个初学者，每次看的时候都会有一种大彻大悟的感觉，而看完之后却总是一脸懵逼。原型与闭包可以说是 JavaScirpt 中理解起来最难的部分了，当然，我也只是了解到了一些皮毛，对于 JavaScript OOP 更是缺乏经验。这里我想总...

Yangder 2019-08-23 12:03 评论0 收藏0