[置顶] [译文]深入理解JavaScript的this关键字（一）

原文：Understand JavaScript’s “this” With Clarity, and Master It

翻译成两篇文章：

[译文]深入理解JavaScript的this关键字（一）

[译文]深入理解JavaScript的this关键字（二）

1 前言

（在这篇文章中，我们还会学习所有this关键字容易让人误解的场景。）

前置要求：一点点的JS知识

阅读本文需要的时间：大约40分钟

一般来说，无论是新人还是经验丰富的JS开发者，都曾对this关键字感到迷惑。这篇文章目标在于完整地阐述this。（我相信），只要我们理解了这篇文章，我们不再会对this感到担心。我们会理解如何在任何场景中使用this，包括被证明是难懂的机会场景。

我们使用this的方式，类似我们在英语和法语中使用代词。我们常这么写：

John is running fast because he is trying to catch the train.

注意代词he的使用。我们本可以这么写：

John is running fast because John is trying to catch the train.

（当然我们实际上不这么写。）我们不重复使用John。和he类似，在JS中，我们使用this用作一个快捷方式，一个指示对象；this指示一个对象。这个对象是上下文环境中的客体，或者执行中的代码的客体。考虑下面这个例子：

var person = {
firstName: "Penelope",
lastName: "Barrymore",
fullName: function() {
console.log(this.firstName + " " + this.lastName); // ​​​​​Penelope Barrymore​​​​​
console.log(person.firstName + " " + person.lastName); // ​​​​​Penelope Barrymore​​​​​
}
}
person.fullName();

如果我们使用person.firstName和person.lastName，正如上面那个例子中那样，我们的代码会变得不清楚的。考虑一下：可能存在一个变量名为person的全局变量。我们可能没意识到这点。所以，我们使用this关键字不仅是基于美学原因（作为一个指示物），而且为了更精确；它的确使得我们的代码更加清晰，正如代词he使得我们的语句更加情绪。它告诉我们指的是语句一开始的John。

正如代词he被用作指代“先行物”，this关键字被用作指代那个被函数（this在那个函数中被指代）绑定的对象。this关键字不仅指代对象，而且包含对象的值。正如代词，this能够被认为是一个快捷方式（或者一个合理的清晰的替代物），用以指代在“上下文“中出现的对象（先行物对象）。我们之后会学习更多关于content的内容。

JS的this关键字基础

首先，我们知道，JS中的所有函数都由相应的属性，只要是对象，就有属性。当一个函数执行时，它得到它的this属性：一个有调用该函数的对象的值的变量。

this总是指代(或者说保有值）一个对象，一个单一的对象。而且它通常在一个函数或者一个方法中被使用。虽然它可能在一个函数外面，也就是在全局作用域中被使用。注意：当我们使用严格模式，this的值在全局函数和匿名函数中是

undefined

,它没有绑定任何对象

（译者的代码。node环境。）

'use strict';
console.log(this); //undefined

如果this在一个函数内（比如函数A)被使用，那么this包含调用函数A的对象。我们需要使用this去访问调用函数A的对象的属性和方法，因为我们不总是知道正在调用函数的对象的名字，有时候没有其他名字去指代那个对象。确实，this指代调用功函数的对象的快捷方式。

var person = {
firstName: "Penelope",
lastName: "Barrymore",
// Since the "this" keyword is used inside the gullName method below, and the gullName method is defined on the person object,
// "this" will have the value of the person object because the person object will invoke showFullName ()​

fullName: function() {
console.log(this.firstName + " " + this.lastName); // ​​​​​Penelope Barrymore​​​​​
}
}
person.fullName();

2 关于this,你最应该清楚的

你需要理解上述关于this的原理，那么你就会理解：this起初不会被赋值，直到它所在的那个函数被调用。我们把那个this被定义所在的函数称为

this funtion

。

似乎this指代定义所在的对象，但是this直到被对象调用才被赋值。而且被赋予的值是调用函数的对象，在大多数环境下都是如此。然而，有一些场景下，this没有调用对象的值，我会之后讨论这些场景。

3 this在全局作用域中使用

在全局作用域中，当代码在浏览器中被执行，所有全局变量和函数在window对象中被定义。所以，当我们在全局函数中使用this，它指代全局的window对象（前提是非严格模式）。

因此下面代码的结果是这样的：

var firstName = "Peter",
lastName = "Ally";

function fullName() {
console.log(this.firstName + " " + this.lastName);
}

var person = {
firstName: "Penelope",
lastName: "Barrymore",
fullName: function() {
console.log(this.firstName + " " + this.lastName);
}
}
person.fullName(); //// ​​​​​Penelope Barrymore​​​​​
fullName(); //Peter Ally
window.fullName(); //Peter Ally

下一篇：

[译文]深入理解JavaScript的this关键字（二）