[译] JavaScript中的“this”是什么？

原文：What is “this” in JavaScript?

若是你曾使用JavaScript库作过开发，那么你可能已经注意到一个名为 this的特定关键字。虽然 this在JavaScript中很是常见，可是彻底理解this关键字的原理以及在代码中如何使用对至关一部分的开发者来讲着实不易。在这篇文章中，我将帮你深刻理解 this及其工做机制。

在开始以前，请确保已安装 Node。而后，打开命令行终端并运行 node 命令。

全局环境中的“this”

this的工做机制理解起来并非很容易。咱们经过将 this置于不一样环境下，分别来理解 this是如何工做的。首先看一下 global环境。

在全局环境中， this至关于全局对象 global。

> this === global
true
复制代码

但这只在 node中才有效。若是咱们将相同的代码放在js文件中运行，获得的输出为false。

若是想测试效果，能够建立一个名为 index.js的文件，包含如下代码：

console.log(this === global);
复制代码

而后使用 node命令运行此文件：

$ node index.js
false
复制代码

缘由是在JavaScript文件中， this等同于 module.exports而不是 global 。

函数中的“this”

函数中的 this值一般是由函数的调用方来定义。所以，每次执行函数，函数内的 this值可能都不同。

在 index.js文件中，编写一个很是简单的函数，来检查 this是否等于global对象。

function rajat() {
  console.log(this === global)
}
rajat()
复制代码

若是咱们使用 node运行此代码，获得的输出为 true 。若是在文件的顶部添加 "use strict"，并再次运行它，将会获得一个 false输出，由于如今的 this值为 undefined 。

为了进一步解释这一点，让咱们建立一个简单的函数来定义超级英雄的真实姓名和英雄名字。

function Hero(heroName, realName) {
  this.realName = realName;
  this.heroName = heroName;
}
const superman= Hero("Superman", "Clark Kent");
console.log(superman);
复制代码

请注意，这个函数并非以严格模式编写的。 node运行此代码，并不会获得咱们预期的“Superman”和“Clark Kent”，但它只会给咱们一个 undefined 。

背后的缘由是，因为函数不是以严格模式编写的， this指向global对象。

若是在严格模式下运行此代码，咱们会收到报错，由于JavaScript不容许将属性 realName和 heroName赋给 undefined 。其实这是一件好事，由于它阻止咱们建立全局变量。

另外，以大写形式书写函数名意味着咱们须要将它视为构造函数，使用 new运算符来调用。用下面的代码替换上面代码段的最后两行：

const superman = new Hero("Superman", "Clark Kent");
console.log(superman);
复制代码

再次运行 node index.js命令，如今会获得你预期的输出。

构造函数中的“this”

JavaScript没有特定的构造函数。咱们所能作的就是使用 new运算符将函数调用转换为构造函数调用，如上一节所示。

构造函数被调用时，会建立一个新对象并将其设置为函数的 this参数。构造函数会隐式的返回这个对象，除非咱们明确的返回了另一个对象。

在 hero函数内部添加下面的 return语句：

return {
  heroName: "Batman",
  realName: "Bruce Wayne",
};
复制代码

若是咱们再次运行 node命令，咱们会看到 上面的 return语句覆盖了构造函数调用。

return语句不会覆盖构造函数调用的惟一情形是，return语句返回的不是一个对象。在这种状况下，对象将包含原始值。

方法中的“this”

当函数做为对象的方法被调用时， this指向的是该对象，也称为函数调用的接收器(receiver)。

假设 hero对象有一个 dialogue方法 ，那么 dialogue中的 this值指向 hero自己。此时的 hero也被称为 dialogue方法调用的接收者。

const hero = {
  heroName: "Batman",
  dialogue() {
    console.log(`I am ${this.heroName}!`);
  }
};
hero.dialogue();
复制代码

这个例子很是简单，但在实际状况中，咱们的方法很难跟踪接收器。在 index.js的末尾添加如下代码段。

const saying = hero.dialogue;
saying();
复制代码

若是我将 dialogue的引用存储在另外一个变量中，并将该变量做为函数调用。 node运行代码 ， this将返回 undefined ，由于该方法已经丢失了接收器。 this此时指向 global ，而不是 hero 。

当咱们将一个方法做为回调传递给另外一个方法时，一般会丢失接收器。咱们能够经过添加包装函数或使用 bind方法将 this与特定对象绑定来解决这个问题。

call() 和 apply()

虽然函数的 this值是隐式设置的，咱们在调用函数时也可使用 call()和 apply()明确设置 this参数。

咱们重构一下前面章节的代码片断，以下所示：

function dialogue () {
  console.log (`I am ${this.heroName}`);
}
const hero = {
  heroName: 'Batman',
};
复制代码

若是要将 hero对象做为 dialogue函数的接收器，咱们能够这样使用 call()或 apply() ：

dialogue.call(hero)
// or
dialogue.apply(hero)
复制代码

若是你是在非严格模式下使用 call或 apply ，JavaScript引擎会忽略传递给 call或 apply的 null或 undefined （译者注：被替换为global）。这也是为何建议始终以严格模式编写代码的缘由之一。

bind()

当咱们将一个方法做为回调函数传递给另外一个函数时，老是存在丢失方法的原有接收器的风险，使得 this参数指向全局对象。

bind()方法能够将 this参数固定的绑定到一个值上。下面的代码片断， bind会建立一个新的 dialogue函数，并将 this值设置为 hero 。（译者注：bind()方法会建立一个新函数，称为绑定函数-bound function-BF，当调用这个绑定函数时，绑定函数会以建立它时传入 bind()方法的第一个参数做为 this，传入 bind() 方法的第二个以及之后的参数加上绑定函数运行时自己的参数按照顺序做为原函数的参数来调用原函数。）

const hero = {
  heroName: "Batman",
  dialogue() {
    console.log(`I am ${this.heroName}`);
  }
};
setTimeOut(hero.dialogue.bind(hero), 1000);
复制代码

这样的话，即便使用 call或 apply方法也没法改变 this的值 。

箭头函数中的“this”

箭头函数内的 this与其余类型的JavaScript函数有很大的不一样。An arrow function uses the this value from its enclosing execution context, since it does have one of its own.

箭头函数会永久地捕获 this值，阻止 apply或 call后续更改它。

为了解释箭头函数中的 this是如何工做的，咱们来写一个箭头函数：

const batman = this;
const bruce = () => {
  console.log(this === batman);
};
bruce();
复制代码

这里，咱们将 this值存储在变量中，而后将该值与箭头函数内的 this值进行比较。在终端中运行 node index.js，输出应该为 true 。

箭头函数内的 this值没法明确设置。此外，使用 call 、 apply或 bind等方法给 this传值，箭头函数会忽略。箭头函数引用的是箭头函数在建立时设置的 this值。（译者注：箭头函数中没有this绑定，必须经过查找做用域链来决定它的值，若是箭头函数被非箭头函数包裹，那么this值由外围最近一层非箭头函数决定，不然为undefined。）

箭头函数也不能用做构造函数。所以，咱们也不能在箭头函数内给 this设置属性。

那么箭头函数对 this 能够作什么呢？

箭头函数可使咱们在回调函数中访问 this 。经过下面的 counter对象来看看如何作到的：

const counter = {
  count: 0,
  increase() {
    setInterval(function() {
      console.log(++this.count);
    }, 1000);
  }
}
counter.increase();
复制代码

使用 node index.js运行此代码，只会获得一个 NaN的列表。这是由于 this.count已经不是指向 counter对象了。它实际上指向的为 global对象。

若是想让计数器正常工做，可使用箭头函数重写它。

const counter = {
  count: 0,
  increase () {
    setInterval (() => {
      console.log (++this.count);
    }, 1000);
  },
};
counter.increase();
复制代码

回调函数使用 this与 increase方法绑定， counter如今能够正常工做了。

注意 ：不要将 ++this.count 写成 this.count + 1。后者只会增长count的值一次，每次迭代都会返回相同的值。

Class中的“this”

类是JavaScript应用程序中最重要的一部分。让咱们看看类中的this有何不一样。

类一般包含一个 constructor ， this能够指向任何新建立的对象。

不过在做为方法时，若是该方法做为普通函数被调用， this也能够指向任何其余值。与方法同样，类也可能失去对接收器的跟踪。

咱们将以前建立的 Hero函数改造为类。该类包含一个构造函数和一个 dialogue()方法。最后，建立一个类的实例并调用 dialogue方法。

class Hero {
  constructor(heroName) {
    this.heroName = heroName;
  }
  dialogue() {
    console.log(`I am ${this.heroName}`)
  }
}
const batman = new Hero("Batman");
batman.dialogue();
复制代码

构造函数里的 this指向新建立的 类实例。当咱们调用 batman.dialogue()时， dialogue()做为方法被调用， batman是它的接收器。

可是若是咱们将 dialogue()方法的引用存储起来，并稍后将其做为函数调用，咱们会丢失该方法的接收器，此时 this参数指向 undefined 。

const say = batman.dialogue;
say();
复制代码

出现错误的缘由是JavaScript 类是隐式的运行在严格模式下的。咱们是在没有任何自动绑定的状况下调用 say()函数的。要解决这个问题，咱们须要手动使用 bind()将 dialogue()函数与 batman绑定在一块儿。

const say = batman.dialogue.bind(batman);
say();
复制代码

咱们也能够在 构造函数方法中作这个绑定。

总结

咱们须要在JavaScript中使用 this ，就像咱们须要在英语中使用代词同样。以这两句话为例：

• Rajat loves DC Comics.
• Rajat also loves Marvel movies.

咱们可使用代词将这两个句子组合在一块儿，因此这两句话如今成了：

Rajat loves DC Comics, and he also loves Marvel Comics

这个简短的语法课完美地解释了 this在JavaScript中的重要性。就像代词 he将两个句子链接在一块儿同样， this能够做为再次引用相同内容的捷径。

但愿这篇文章能够帮助你解答JavaScript中有关 this的困惑，轻松驾驭这个简单但很是重要的关键字。

---

《IVWEB 技术周刊》 震撼上线了，关注公众号：IVWEB社区，每周定时推送优质文章。

• 周刊文章集合: weekly
• 团队开源项目: Feflow