彻底搞懂JavaScript中的this关键字：原理与实战技巧

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

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

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代码

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

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

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方法

//以下是一个简单的对象，我们定义了一个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); // 无法读取未定义的属性

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]

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开发人员来说再常见不过了
var that = 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

//下面代码中有两个对象。其中一个定义了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();

// 我们要使用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