Kuasai kata kunci ini dalam petua JavaScript_javascript

Kata kunci ini dalam JS mengelirukan banyak pembangun JS baharu dan lama. Artikel ini akan memberikan penjelasan lengkap tentang kata kunci ini. Selepas membaca artikel ini, semua kekeliruan anda akan dihapuskan. Anda akan belajar cara menggunakan ini dengan betul dalam pelbagai situasi.

Kami menggunakan ini dengan cara yang sama kami menggunakan kata nama dalam bahasa semula jadi seperti bahasa Inggeris dan Perancis. Contohnya, "John berlari pantas kerana dia ingin mengejar kereta api." Sila ambil perhatian kata ganti "dia" yang digunakan untuk merujuk kepada John dalam ayat ini. Kita boleh menyatakannya dengan cara ini, "John berlari pantas kerana John ingin mengejar kereta api." Mengikut kebiasaan bahasa biasa, kita tidak menyatakan dengan cara kedua. Jika kami bercakap dengan cara kedua, keluarga dan rakan gay kami akan menganggap kami sebagai orang aneh. Mungkin bukan sahaja ahli keluarga kita, malah rakan dan rakan sekerja kita yang cuaca cerah akan menjauhi kita. Begitu juga, dalam JS, kami menganggap kata kunci ini sebagai jalan pintas atau rujukan. Kata kunci ini menunjuk kepada subjek konteks semasa (konteks, yang akan diterangkan di bawah), atau subjek blok kod yang sedang dilaksanakan.

Pertimbangkan kod berikut:

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

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

Jika kita menggunakan person.firstName dan person.lastName, kod tersebut menjadi samar-samar dalam beberapa kes. Sebagai contoh, terdapat nama pembolehubah dengan nama yang sama dengan orang dalam pembolehubah global. Dalam kes ini, jika kita mahu membaca nilai person.firstName, sistem mungkin akan membaca sifat firstName (harta) daripada pembolehubah orang bagi pembolehubah global. Dengan cara ini, sukar untuk mencari ralat apabila kami menyahpepijat kod. Jadi ini bukan sahaja memainkan peranan dalam mencantikkan kod, tetapi juga memastikan ketepatan program. Pendekatan ini sebenarnya sama dengan penggunaan "dia" yang disebutkan sebelum ini, menjadikan kod kami lebih jelas. "Dia" merujuk kepada "John" pada permulaan ayat.

Sama seperti kata ganti "dia" digunakan untuk merujuk kepada anteseden dalam ayat (anteseden ialah kata nama yang ditunjukkan oleh kata ganti), kata kunci ini digunakan dengan cara yang sama untuk merujuk kepada kaedah semasa (fungsi, yang juga boleh dipanggil fungsi). ini bukan sahaja merujuk kepada objek, tetapi juga mengandungi nilai objek. Seperti anteseden, ini juga boleh difahami sebagai pintasan (atau pengganti yang sederhana mengurangkan kekaburan) yang digunakan untuk merujuk kepada objek semasa (juga dipanggil "objek anteseden") dalam konteks. Kami akan menerangkan secara khusus "konteks" kemudian.

Teori asas kata kunci ini

Pertama sekali, kita perlu tahu bahawa objek (Objek) mempunyai set sifat (sifat), dan semua kaedah (fungsi) juga mempunyai set sifat. Apabila kaedah dijalankan, terdapat atribut ini - pembolehubah yang menyimpan nilai objek yang memanggil kaedah (secara tepatnya, kaedah yang menggunakan kata kunci ini).

Kata kunci ini sentiasa menunjuk ke objek dan memegang nilai objek ini Walaupun ia boleh muncul di luar kaedah (fungsi skop global), ia biasanya muncul dalam badan kaedah. Perlu diingat bahawa jika kita menggunakan mod ketat dan menggunakan kata kunci ini dalam fungsi global atau kaedah tanpa nama yang tidak terikat pada sebarang objek, ini akan menunjukkan kepada tidak ditentukan.

Ini digunakan dalam badan kaedah, seperti kaedah A, dan ia akan menunjukkan kepada nilai objek yang memanggil kaedah A. Tidak dalam apa jua keadaan kita boleh mencari nama objek yang memanggil kaedah A. Dalam kes ini, kita menggunakan ini untuk mengakses kaedah dan sifat yang dimiliki oleh objek yang memanggil kaedah A. ini sebenarnya hanyalah jalan pintas untuk merujuk kepada anteseden—objek yang kaedah dipanggil.

Mari kita lihat lebih dekat pada kod berikut yang menggunakan ini.

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

Pertimbangkan contoh jQuery berikut menggunakan ini.

//这是一段很简单的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将一直指向调用当前方法的对象。