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()出現(xiàn)在全局域里。

 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
//所以現(xiàn)在的上下文是anotherPerson，因為anotherPerson通過借助使用apply方法間接調用了person的showFullName方法

//以下是一個簡單的對象，我們定義了一個clickHandler方法。我們想讓這個方法在頁面上某個button被單擊時執(zhí)行。
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的$方法包裝，現(xiàn)在變成一個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) {
   //現(xiàn)在我們不用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開發(fā)人員來說再常見不過了
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;

//執(zhí)行showUserData方法，結果將 來自全局的data數組而非user對象的data屬性
showUserData(); // Samantha 12 (來自全局變量data)
//解決方案：通過使用bind方法來顯式設置this的值
//把showData方法綁定到user對象上
var showUserData = user.showData.bind(user);

//現(xiàn)在結果將來自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;
 }
}

//如果執(zhí)行下面的代碼，gameController.avgScore屬性的實際取值將由appController的scores而來
//不要執(zhí)行下面的代碼，我們只是為了對這種情況進行說明。實際上我們想讓appController.avgScore仍然為null。
gameController.avgScore = appController.avg();

// 我們要使用apply方法，注意這里傳入appController.avg方法的第二個參數
appController.avg.apply(gameController, gameController.scores);

//盡管avg方法是借來的，但是現(xiàn)在avgScore屬性已經被成功地應用到gameController上了。
console.log(gameController.avgScore); // 46.4
//appController.avgScore仍然是null，只有gameController的avgScore被更新了
console.log(appController.avgScore); // null