本文例項講述了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程式設計有所幫助。