var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  fullName: function () {
  // 正如我們?cè)谖闹刑岬降氖褂谩八弊鳛榇~一樣，我們?cè)谶@里使用this

  console.log(this.firstName + " " + this.lastName);
  //我們其實(shí)也可以這樣寫：
  console.log(person.firstName + " " + person.lastName);
  }
 }

var person = {
 firstName: "Penelope",
 lastName: "Barrymore",
 //this用在showFullName方法中，而showFullName定義在person對(duì)象中，由于調(diào)用showFullName的是person這個(gè)對(duì)象，所以this擁有person的值

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

//這是一段很簡(jiǎn)單的jQuery代碼

$("button").click(function(event) {
 // $(this) 會(huì)指向$("button")對(duì)象
 // 因?yàn)?("button")對(duì)象調(diào)用click方法
 console.log($(this).prop("name"));
});

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

function showFullName() {
 //在這個(gè)方法中，this將指向window對(duì)象。因?yàn)閟howFullName()出現(xiàn)在全局域里。

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

var person = {
 firstName: "Penelope",
 lastName: "Barrymore",
 showFullName: function() {
  //下面這行代碼，this指向person對(duì)象，因?yàn)閟howFullName方法會(huì)被person對(duì)象調(diào)用。
  console.log(this.firstName + " " + this.lastName);
 }
}

showFullName(); // Peter Ally

//window對(duì)象包含了所有的全局變量和方法，因而會(huì)有以下輸出
window.showFullName(); // Peter Ally

//使用了this關(guān)鍵字的showFullName方法定義在person對(duì)象里，this關(guān)鍵字指向person對(duì)象，因以會(huì)有以下輸出
person.showFullName(); // Penelope Barrymore

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

//使用person對(duì)象調(diào)用showFullName的時(shí)候，上下文是person對(duì)象
//showFullName內(nèi)部的this指向person對(duì)象
person.showFullName(); // Penelope Barrymore
//如果我們用不同的對(duì)象來(lái)調(diào)用showFullName
var anotherPerson = {
 firstName: "Rohit",
 lastName: "Khan"
};

//我們可以使用apply方法來(lái)顯式設(shè)置this的值—遲些我們會(huì)講到apply方法
//this會(huì)指向任何一個(gè)調(diào)用了this方法的對(duì)象，因此會(huì)有以下輸出結(jié)果
person.showFullName.apply(anotherPerson); // Rohit Khan
//所以現(xiàn)在的上下文是anotherPerson，因?yàn)閍notherPerson通過(guò)借助使用apply方法間接調(diào)用了person的showFullName方法

//以下是一個(gè)簡(jiǎn)單的對(duì)象，我們定義了一個(gè)clickHandler方法。我們想讓這個(gè)方法在頁(yè)面上某個(gè)button被單擊時(shí)執(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; // 隨機(jī)返回0或1
  //下面這行代碼會(huì)從數(shù)組data里隨機(jī)打印姓名和年齡
  console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
 }
}

//button對(duì)象被jQuery的$方法包裝，現(xiàn)在變成一個(gè)jQuery對(duì)象
//所以輸出結(jié)果是undefined，因?yàn)閎utton對(duì)象沒有data這個(gè)屬性
$("button").click(user.clickHandler); // 無(wú)法讀取未定義的屬性

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

 clickHandler: function() {
  //在里用this.data沒有太大問題，因?yàn)閠his指向的是user對(duì)象，data是user的一個(gè)屬性
  this.data.forEach(function(person) {
   //但是在這個(gè)匿名方法（作為參數(shù)被傳進(jìn)forEach方法的這個(gè)方法）里，this不再指向user對(duì)象
   //內(nèi)部方法無(wú)法訪問外部方法的this
   console.log("What is This referring to? " + this); //輸出結(jié)果為：[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對(duì)象時(shí)的值，我們把它賦值給另外一個(gè)變量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

 // 這句代碼對(duì)大多數(shù)JS開發(fā)人員來(lái)說(shuō)再常見不過(guò)了
var that = this;

// data變量是一個(gè)全局變量
var data = [{
  name: "Samantha",
  age: 12
},
{
  name: "Alexis",
  age: 14
}];

var user = {
  // 而這里的data是user的一個(gè)屬性
  data: [{
    name: "T. Woods",
    age: 37
  },
  {
    name: "P. Mickelson",
    age: 43
  }],
  showData: function(event) {
    var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 隨機(jī)生成1或0
    //這句話會(huì)從數(shù)組data里隨機(jī)顯示人名和歲數(shù)
    console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
  }

}

// 把user.showData方法賦值給變量 showUserData
var showUserData = user.showData;

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

//現(xiàn)在結(jié)果將來(lái)自u(píng)ser對(duì)象，因?yàn)閠his關(guān)鍵字已經(jīng)被強(qiáng)制綁定到user對(duì)象上了
showUserData(); // P. Mickelson 43

//下面代碼中有兩個(gè)對(duì)象。其中一個(gè)定義了avg方法，另一個(gè)不包含avg的定義。我們用另一個(gè)對(duì)象來(lái)借用前一對(duì)象的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屬性的實(shí)際取值將由appController的scores而來(lái)
//不要執(zhí)行下面的代碼，我們只是為了對(duì)這種情況進(jìn)行說(shuō)明。實(shí)際上我們想讓appController.avgScore仍然為null。
gameController.avgScore = appController.avg();

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

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