var value = 10;
var obj = {
value: 100,
method: function () {
var foo = function () {
console.log(this.value); // 10
console.log(this); // Window物件
};
foo();
return this.value;
}
};
obj.method();
首先我們定義一個全域性的 value 屬性為 10，相當於 window.value = 10。console.log(obj.method()); // 100obj.method() 函數的返回值是 this.value，method() 函數的呼叫體是 obj 物件，此時 this 就指向 obj 物件，而 obj.value = 100，因此會輸出“100”。
// 全域性變數
var number = 10;
function Person() {
// 複寫全域性變數
number = 20;
// 範例變數
this.number = 30;
}
// 原型函數
Person.prototype.getNumber = function () {
return this.number;
};
// 通過new操作符獲取物件的範例
var p = new Person();
console.log(p.getNumber()); // 30
在上面這段程式碼中，我們定義了全域性變數 number 和範例變數 number，通過 new 操作符生成 Person 物件的範例 p 後，在呼叫 getNumber() 操作時，其中的 this 就指向該範例 p，而範例 p 在初始化的時候被賦予 number 值為 30，因此最後會輸出“30”。
// 全域性變數
var value = 10;
var obj = {
value: 20
};
// 全域性函數
var method = function () {
console.log(this.value);
};
method(); // 10
method.call(obj); // 20
method.apply(obj); // 20
var newMethod = method.bind(obj);
newMethod(); // 20
在上面這段程式碼中，我們定義了全域性變數 value 和帶有 value 屬性的 obj 物件，即 window.value = 10、obj.value = 20，同時定義了一個全域性 method 匿名函數表示式，相當於 window.method = function(){}。
var user = {
data: [
{name: "kingx1", age: 11},
{name: "kingx2", age: 12}
],
clickHandler: function (event) {
// 隨機生成整數0或1
var randomNum = ((Math.random() * 2 | 0) + 1) - 1;
// 從data陣列裡隨機獲取name屬性和age屬性，並輸出
console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
}
};
var button = document.getElementById('btn');
button.onclick = user.clickHandler;
我們建立一個包含 clickHandler() 函數的簡單物件 user，當頁面上的按鈕被單擊時可以使用。Uncaught TypeError: Cannot read property '1' of undefined
這是為什麼呢？button.onclick = user.clickHandler.bind(user);修改完成後，再次單擊 button 按鈕，控制檯會輸出對應的結果：
var user = {
sport: 'basketball',
data: [
{name: "kingx1", age: 11},
{name: "kingx2", age: 12}
],
clickHandler: function () {
// 此時的this指向的是user物件
this.data.forEach(function (person) {
console.log(this); // [object Window]
console.log(person.name + ' is playing ' + this.sport);
})
}
};
user.clickHandler();
在呼叫 user.clickHandler() 函數時，會執行到第 9 行程式碼，此時的 this 會指向 user 物件，因此可以存取到 data 屬性，並進行 forEach 迴圈。forEach 迴圈實際是一個匿名函數，用於接收一個 person 引數，表示每次遍歷的陣列中的值。
var user = {
sport: 'basketball',
data: [
{name: "kingx1", age: 11},
{name: "kingx2", age: 12}
],
clickHandler: function () {
// 使用臨時變數_this儲存this
var _this = this;
this.data.forEach(function (person) {
// 通過_this存取sport屬性
console.log(person.name + ' is playing ' + _this.sport);
})
}
};
user.clickHandler();
修改後輸出的結果如下所示：
function f(k) {
this.m = k;
return this;
}
var m = f(1);
var n = f(2);
console.log(m.m);
console.log(n.m);
上面這道題的程式碼雖然短小，在理解的時候卻不是那麼容易，我們一步步來分析：