溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JavaScript中的this基本問題.分享給大家供大家參考，具體如下：
在函數中 this 到底取何值，是在函數真正被調用執行的時候確定下來的，函數定義的時候確定不了。
執行上下文環境 ：
**定義**：執行函數的時候，會產生一個上下文的對象，里面保存變量，函數聲明和this。
**作用**：用來保存本次運行時所需要的數據
當你在代碼中使用了 this，這個 this 的值就直接從執行的上下文中獲取了，而不會從作用域鏈中搜尋。
關于 this 的取值，大體上可以分為以下幾種情況：
情況一：全局 & 調用普通函數
在全局環境中，this 永遠指向 window。
console.log(this === window); //true
普通函數在調用時候(注意不是構造函數，前面不加 new)，其中的 this 也是指向 window。
但是如果在嚴格模式下調用的話會報錯：
var x = 1;
function first(){
console.log(this); // undefined
console.log(this.x); // Uncaught TypeError: Cannot read property 'x' of undefined
}
first();
情況二：構造函數
所謂的構造函數就是由一個函數 new 出來的對象，一般構造函數的函數名首字母大寫，例如像 Object，Function，Array 這些都屬于構造函數。
function First(){
this.x = 1;
console.log(this); //First {x:1}
}
var first = new First();
console.log(first.x); //1
上述代碼，如果函數作為構造函數使用，那么其中的 this 就代表它即將 new 出來的對象。
但是如果直接調用 First函數，而不是 new First()，那就變成情況1，這時候 First() 就變成普通函數。
function First(){
this.x =1;
console.log(this); //Window
}
var first = First();
console.log(first.x); //undefined
情況三：對象方法
如果函數作為對象的方法時，方法中的 this 指向該對象。
var obj = {
x: 1,
first: function () {
console.log(this); //Object
console.log(this.x); //1
}
};
obj.first();
注意：若是在對象方法中定義函數，那么情況就不同了。
var obj = {
x: 1,
first: function () {
function second(){
console.log(this); //Window
console.log(this.x); //undefined
}
second();
}
}
obj.first();
可以這么理解：函數 second雖然是在 obj.first 內部定義的，但它仍然屬于一個普通函數，this 仍指向 window。
在這里，如果想要調用上層作用域中的變量 obj.x，可以使用 self 緩存外部 this 變量。
var obj = {
x:1,
first: function () {
var self = this;
function second(){
console.log(self); //{x: 1}
console.log(self.x); //1
}
second();
}
}
obj.first();
如果 first 函數不作為對象方法被調用：
var obj = {
x: 1,
first: function () {
console.log(this); //Window
console.log(this.x); //undefined
}
};
var fn = obj.first;
fn();
obj.first 被賦值給一個全局變量，并沒有作為 obj 的一個屬性被調用，那么此時 this 的值是 window。
情況四：構造函數 prototype 屬性
function First(){
this.x = 1;
}
First.prototype.getX = function () {
console.log(this); //First {x: 1, getX: function}
console.log(this.x); //1
}
var first= new First();
first.getX();
在 First.prototype.getX 函數中，this 指向的first 對象。不僅僅如此，即便是在整個原型鏈中，this 代表的也是當前對象的值。
情況五：函數用 call
var obj = {
x:1
}
function first(){
console.log(this); //{x: 1}
console.log(this.x); //1
}
first.call(obj);
當一個函數被 call調用時，this 的值就取傳入的對象的值。
來源：知乎
鏈接：https://zhuanlan.zhihu.com/p/25294187?utm_source=com.youdao.note&utm_medium=social
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。
更多關于JavaScript相關內容還可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
