JavaScript_javascript 팁에서 이 키워드를 마스터하세요

JS의 this 키워드는 많은 신규 개발자와 기존 JS 개발자를 혼란스럽게 합니다. 이 기사에서는 이 키워드에 대한 완전한 설명을 제공합니다. 이 글을 읽고 나면 모든 혼란이 해소될 것입니다. 다양한 상황에서 이를 올바르게 사용하는 방법을 배우게 됩니다.

이것을 영어, 프랑스어 등 자연어에서 명사를 사용하는 것과 같은 방식으로 사용합니다. 예를 들어, "John은 기차를 따라잡고 싶었기 때문에 빨리 달렸습니다." 이 문장에서 John을 지칭하는 데 사용된 대명사 "he"에 유의하세요. 우리는 이것을 이렇게 표현할 수도 있었습니다. "John은 기차를 따라잡고 싶었기 때문에 빨리 달렸습니다." 일반적인 언어 습관에 따르면 우리는 그것을 두 번째 방식으로 표현하지 않습니다. 만약 우리가 두 번째 방식으로 말한다면 우리 가족과 동성애자 친구들은 우리를 이상한 사람으로 생각할 것입니다. 어쩌면 우리 가족뿐만 아니라 날씨가 좋은 친구와 동료조차도 우리를 멀리할 수도 있습니다. 마찬가지로 JS에서는 this 키워드를 바로가기 또는 참조 대상으로 간주합니다. this 키워드는 현재 컨텍스트(아래에서 설명할 컨텍스트)의 주제 또는 현재 실행 중인 코드 블록의 주제를 가리킵니다.

다음 코드를 고려하세요.

var person = {
   firstName: "Penelope",
   lastName: "Barrymore",
   fullName: function () {
   // 正如我们在文中提到的使用“他”作为代名词一样，我们在这里使用this

   console.log(this.firstName + " " + this.lastName);
   //我们其实也可以这样写：
   console.log(person.firstName + " " + person.lastName);
   }
  }

person.firstName과 person.lastName을 사용하면 코드가 모호해지는 경우가 있습니다. 예를 들어 전역 변수에 person과 동일한 이름의 변수 이름이 있습니다. 이 경우 person.firstName의 값을 읽으려면 시스템은 전역 변수의 person 변수에서 firstName 속성(속성)을 읽을 것입니다. 이런 식으로 코드를 디버깅할 때 오류를 찾기가 어렵습니다. 따라서 이는 코드를 아름답게 하는 역할을 할 뿐만 아니라 프로그램의 정확성을 보장하는 역할도 합니다. 이 접근 방식은 실제로 앞서 언급한 "he"의 사용법과 동일하므로 코드가 더 명확해집니다. "그"는 문장 시작 부분에 있는 "John"을 나타냅니다.

대명사 "그"가 문장에서 선행사를 지칭하는 데 사용되는 것처럼(전사는 대명사가 나타내는 명사입니다), this 키워드는 현재 메소드(함수, 함수, 함수라고도 함) 바인딩된 개체입니다. 이는 객체를 참조할 뿐만 아니라 객체의 값도 포함합니다. 전건과 마찬가지로 이는 문맥에서 현재 개체("전건 개체"라고도 함)를 참조하는 데 사용되는 지름길(또는 모호성을 적당히 줄이는 대체물)로 이해될 수도 있습니다. "컨텍스트"에 대해서는 나중에 구체적으로 설명하겠습니다.

키워드의 기본이론

먼저 객체(Object)에는 속성 집합(property)이 있고, 모든 메소드(function)에도 속성 집합이 있다는 것을 알아야 합니다. 메소드가 실행되면 this 속성이 있습니다. 이 속성은 메소드(정확히 말하면 this 키워드를 사용하는 메소드)를 호출하는 객체의 값을 저장하는 변수입니다.

this 키워드는 항상 개체를 가리키며 이 개체의 값을 보유합니다. 전역 범위 메서드(함수) 외부에 나타날 수도 있지만 일반적으로 메서드 본문에 나타납니다. 엄격 모드를 사용하고 전역 함수나 객체에 바인딩되지 않은 익명 메서드에서 this 키워드를 사용하면 this는 정의되지 않음을 가리킨다는 점은 주목할 가치가 있습니다.

메서드 A와 같은 메서드 본문에 사용되며, 메서드 A를 호출하는 개체의 값을 가리킵니다. 어떤 경우에도 우리는 메서드 A를 호출하는 개체의 이름을 찾을 수 없습니다. 이 경우 이를 사용하여 메서드 A를 호출하는 개체가 소유한 메서드와 속성에 액세스합니다. 이는 실제로 선행 항목(메서드가 호출되는 개체)을 참조하는 지름길일 뿐입니다.

이를 사용하는 다음 코드를 자세히 살펴보겠습니다.

var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  //this用在showFullName方法中，而showFullName定义在person对象中，由于调用showFullName的是person这个对象，所以this拥有person的值

  showFullName: function() {
    console.log(this.firstName + " " + this.lastName);
  }
}
person.showFullName(); // 结果：Penelope Barrymore

이를 사용하여 다음 jQuery 예제를 살펴보세요.

//这是一段很简单的jQuery代码

$("button").click(function(event) {
  // $(this) 会指向$("button")对象
  // 因为$("button")对象调用click方法
  console.log($(this).prop("name"));
});

我想详细地说一下上面这个jQuery示例:$(this)的使用，这是this的jQuery版本，它用于匿名方法中，这个匿名方法在button的单击事件里执行。这里之所以说$(this)被绑定到button对象，是因为jQuery库把$(this)绑定到调用click方法的对象上。因此，尽管$(this)被定义在一个自身无法访问“自身”变量的匿名方法里，$(this)仍会指向button对象。

请注意，button是一个HTML页面的DOM元素，它同时是一个对象：在上面的例子中，因为我们把它包装在了jQuery的$()方法里，所以它是一个jQuery对象。

this关键字的核心

下面这条规则可以帮助你彻底搞懂this关键字：如果一个方法内部使用了this关键字，仅当对象调用该方法时this关键字才会被赋值。我们估且把使用了this关键字的方法称为“this方法”。

尽管看上去this引用了它在代码中所存在于的对向，事实上在方法被调用之前它并没有被赋值，而赋给它的值又严格地依赖于实际调用“this方法”的对象。this通常会被赋予调用对象的值，下面有一些特殊情况。

全局范围里的this

在全局域中，代码在浏览器里执行，所有变量和方法都属于window对象。因而当我们在全局域中使用this关键字的时候，它会被指向（并拥有）全局变量window对象。如前所述，严格模式除外。window对象是JS一个程序或一张网页的主容器。

因而：

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

function showFullName() {
  //在这个方法中，this将指向window对象。因为showFullName()出现在全局域里。

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

var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  showFullName: function() {
    //下面这行代码，this指向person对象，因为showFullName方法会被person对象调用。
    console.log(this.firstName + " " + this.lastName);
  }
}

showFullName(); // Peter Ally

//window对象包含了所有的全局变量和方法，因而会有以下输出
window.showFullName(); // Peter Ally

//使用了this关键字的showFullName方法定义在person对象里，this关键字指向person对象，因以会有以下输出
person.showFullName(); // Penelope Barrymore

对付this有绝招

当方法内使用了this关键字时，这几种情况最容易引起误解：方法被借用；把方法赋值给某个变量；方法被用作回调函数（callback），被作为参数传递；this所在的方法是个闭包（该方法是一个内部方法）。针对这几种情况，我们将逐一攻破。在此之前，我们先简单介绍一下“上下文”(context)。

JS当中的上下文跟这句话中的主语(subject)类似：“John是赢家，他还了钱”。这句话的主语是John。我们也可以说这句话的上下文是John，因为我们在这句话中关注的是John，即使这里有一个“他”字来代指John这个先行词。正如我们可以使用分号来切换句子的主语一样，通过使用不同的对象来对方法进行调用，当前的上下文对象同样可以被切换。

类似地，以下JS代码：

var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  showFullName: function() {
    // 上下文
    console.log(this.firstName + " " + this.lastName);
  }
}

//使用person对象调用showFullName的时候，上下文是person对象
//showFullName内部的this指向person对象
person.showFullName(); // Penelope Barrymore
//如果我们用不同的对象来调用showFullName
var anotherPerson = {
  firstName: "Rohit",
  lastName: "Khan"
};

//我们可以使用apply方法来显式设置this的值—迟些我们会讲到apply方法
//this会指向任何一个调用了this方法的对象，因此会有以下输出结果
person.showFullName.apply(anotherPerson); // Rohit Khan
//所以现在的上下文是anotherPerson，因为anotherPerson通过借助使用apply方法间接调用了person的showFullName方法

现在我们开始正式讨论应付this关键字的绝招，例子里包含了this所引发的错误以及解决方案。

1.当this被用作回调函数传入其它方法

当我们把一个使用了this关键字的方法当成参数作为回函数的时候，麻烦就来了。例如：

//以下是一个简单的对象，我们定义了一个clickHandler方法。我们想让这个方法在页面上某个button被单击时执行。
var user = {
  data: [{
    name: "T. Woods",
    age: 37
  },
  {
    name: "P. Mickelson",
    age: 43
  }],
  clickHandler: function(event) {
    var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 随机返回0或1
    //下面这行代码会从数组data里随机打印姓名和年龄
    console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
  }
}

//button对象被jQuery的$方法包装，现在变成一个jQuery对象
//所以输出结果是undefined，因为button对象没有data这个属性
$("button").click(user.clickHandler); // 无法读取未定义的属性

上面的代码中，我们把user.clickHandler当成回调函数传入$(“button”)对象的click事件，user.clickHandler中的this将不再指向user对象转。谁调用了这个包含this的方法this就会指向谁。真正调用user.clickHandler的对象是button对象—user.clickHandler会在button对象的单击方法里执行。

注意，尽管我们使用user.clickHandler来调用clickHander方法（我们也只能这么做，因为clickHandler是定义在user对象上的），clickHandler方法本身会被现在被this所指向的上下文对象所调用。所以this现在指向的是$(“button”)对象。

当上下文改变时—当我们在其它对象而非原对象上执行某个方法的时候，显然this关键字不再指向定义了this关键字的原对象。

解决方案：

由于我们真的很想让this.data指向user对象的data属性，我们可以使用Bind/ Apply/ Call等方法来强制改变this所指向的对象。本系列的其它篇目将专门对Bind/ Apply/ Call进行讲解，文中介绍了如何在不同的情况强制改变this的值的方法。与其在本文大篇幅讨论，我强烈建议大家直接去读另外的篇目（译者注：晚些时候放出这里所说的“其它篇目”）。

为了解决前面代码中的问题，我们可以使用bind方法。

针对下面这行代码：

$ ("button").click (user.clickHandler);
我们可以用bind方法把clickHandler绑定的user对象上：

$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43
2.闭包中的this

在内部方法中，或者说闭包中使用this，是另一个很容易被误解的例子。我们必须注意的是，内部方法不能直接通过使用this关键字来访问外部方法的this变量，因为this变量 只能被特定的方法本身使用。例如：

var user = {
  tournament: "The Masters",
  data: [{
    name: "T. Woods",
    age: 37
  },
  {
    name: "P. Mickelson",
    age: 43
  }],

  clickHandler: function() {
    //在里用this.data没有太大问题，因为this指向的是user对象，data是user的一个属性
    this.data.forEach(function(person) {
      //但是在这个匿名方法（作为参数被传进forEach方法的这个方法）里，this不再指向user对象
      //内部方法无法访问外部方法的this
      console.log("What is This referring to? " + this); //输出结果为：[object Window]
      console.log(person.name + " is playing at " + this.tournament);
      // T. Woods is playing at undefined
      // P. Mickelson is playing at undefined
    })
  }

}

user.clickHandler(); // What is "this" referring to? [object Window]

因为匿名方法中的this不能访问外部方法的this，所以在非严格模式下，this指向了全局的window对象

解决方案：

在进入forEach方法之前，额外使用一个变量来引用this。

var user = {
  tournament: "The Masters",
  data: [{
    name: "T. Woods",
    age: 37
  },
  {
    name: "P. Mickelson",
    age: 43
  }],

  clickHandler: function(event) {
    //为了捕获this指向user对象时的值，我们把它赋值给另外一个变量theUserObj，后面我们可以使用theUserObj
    var theUserObj = this;
    this.data.forEach(function(person) {
      //现在我们不用this.tournament了，我们用theUserObj.tournament
      console.log(person.name + " is playing at " + theUserObj.tournament);
    })
  }

}

user.clickHandler();
// T. Woods is playing at The Masters
// P. Mickelson is playing at The Masters

正如下面的代码，很多JS开发人员喜欢使用变量that来设置this的值。但我个人不太喜欢用that这个名字，我喜欢使用让人一眼就能看懂this到底指向谁的那种名字，所以上面的代码中我使用了theUserObj = this。

 // 这句代码对大多数JS开发人员来说再常见不过了
var that = this;

3.方法被赋值给某个变量

this关键字有时候很调皮，如果我们把一个使用了this关键字的方法赋值给一个变量，我们来看会有什么有趣的事发生：

// data变量是一个全局变量
var data = [{
name: "Samantha",
age: 12
},
{
name: "Alexis",
age: 14
}];

var user = {
// 而这里的data是user的一个属性
data: [{
name: "T. Woods",
age: 37
},
{
name: "P. Mickelson",
age: 43
}],
showData: function(event) {
var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 随机生成1或0
//这句话会从数组data里随机显示人名和岁数
console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
}

}

// 把user.showData方法赋值给变量 showUserData
var showUserData = user.showData;

//执行showUserData方法，结果将 来自全局的data数组而非user对象的data属性
showUserData(); // Samantha 12 (来自全局变量data)
//解决方案：通过使用bind方法来显式设置this的值
//把showData方法绑定到user对象上
var showUserData = user.showData.bind(user);

//现在结果将来自user对象，因为this关键字已经被强制绑定到user对象上了
showUserData(); // P. Mickelson 43

4.借用方法带来的问题

JS开发中，借用方法（borrowing methods）很常见。

我们来看下面的代码：

//下面代码中有两个对象。其中一个定义了avg方法，另一个不包含avg的定义。我们用另一个对象来借用前一对象的avg方法。
var gameController = {
  scores: [20, 34, 55, 46, 77],
  avgScore: null,
  players: [{
    name: "Tommy",
    playerID: 987,
    age: 23
  },
  {
    name: "Pau",
    playerID: 87,
    age: 33
  }]
}

var appController = {
  scores: [900, 845, 809, 950],
  avgScore: null,
  avg: function() {

    var sumOfScores = this.scores.reduce(function(prev, cur, index, array) {
      return prev + cur;
    });

    this.avgScore = sumOfScores / this.scores.length;
  }
}

//如果执行下面的代码，gameController.avgScore属性的实际取值将由appController的scores而来
//不要执行下面的代码，我们只是为了对这种情况进行说明。实际上我们想让appController.avgScore仍然为null。
gameController.avgScore = appController.avg();

avg方法的this关键字指向的是gameController对象，如果使用appController调用该方法，this将会指向appController(但事实上这并不是我们期望的结果，因为我们只想借用方法的实现逻辑而非具体的数据来源)。

解决方案：

为了保证gameController只借用appController的avg方法的逻辑，我们使用apply方法：

// 我们要使用apply方法，注意这里传入appController.avg方法的第二个参数
appController.avg.apply(gameController, gameController.scores);

//尽管avg方法是借来的，但是现在avgScore属性已经被成功地应用到gameController上了。
console.log(gameController.avgScore); // 46.4
//appController.avgScore仍然是null，只有gameController的avgScore被更新了
console.log(appController.avgScore); // null

gameController只借用了appController的avg方法，这时this将指向gameController，因为我们把gameController作为apply方法的第一个参数进行传递。apply方法的第一个参数将会显式设置this的取值。

结语

希望您在文中有所收获。现在你可以使用文中介绍的绝招（bind方法，apply方法，call方法，以及把this赋值给 一个变量）来对付跟this相关的任何问题。

正如已经了解到的，this在上下文改变、被作为回调函数使用、被不同的对象调用、或者方法被借用的情况下，this将一直指向调用当前方法的对象。