你真的懂javascript中的 “this” 嗎？

一、前言：

我們知道 “this” 是javascript語言的一個關鍵字，在編寫javascript代碼的時候，經常會見到或者用到它。
但是，有一部分開發朋友，對 “this” 一知半解，下面我們就一起來探討學習下javascript中 “this” 的具體含義吧！

 

二、This總結：

This指針作用域：
1）、在全局執行環境中使用this，表示Global對象，在瀏覽器中就是window對象。
2）、當在函數執行環境中使用this時，情況就有些復雜了。如果函數沒有明顯的作為非window對象的屬性，而只是定義了函數，不管這個函數是不是定義在另一個函數中，這個函數中的this仍然表示window對象。如果函數顯示地作為一個非window對象的屬性，那么函數中的this就代表這個對象。
3）、當通過new運算符來調用函數時，函數被當做一個構造函數，this指向構造函數創建出來的對象。

 

三、各種情形下的DEMO：（當然，你也可以按照自己的想法來做各種測試...）

#在全局執行環境中使用this，表示Global對象，在瀏覽器中就是window對象

console.log(this); //Window
console.log(typeof this); //object
console.log(this === window); //true

##在函數執行環境中使用this時,如果函數沒有明顯的作為非window對象的屬性，而只是定義了函數，不管這個函數是不是定義在另一個函數中，這個函數中的this仍然表示window對象

function A(){
  //在A函數中定義一個B函數
  function B(){
    console.log(this); //Window
    console.log(typeof this); //object
    console.log(this === window); //true
  }
  //在A函數內部調用B函數
  B();
}
//調用A函數
A();

###在函數執行環境中使用this時,如果函數顯式地作為一個非window對象的屬性，那么函數中的this就代表這個對象

//定義一個對象obj，並為她添加屬性name，添加方法objFun
var obj = {
  name: '敲代碼的怪蜀黍',
  objFun: function(){
    console.log(this); // Object {name: "敲代碼的怪蜀黍"}
    console.log(typeof this); //object
    console.log(this === window); //false
    console.log(this.name); //敲代碼的怪蜀黍
  }
};

//調用obj對象的方法
obj.objFun(); //this 綁定到當前對象，也就是obj對象

把上面的代碼稍微改一下：

//定義一個對象obj，並為她添加屬性name，添加方法objFun
var obj = {
  name: '敲代碼的怪蜀黍',
  objFun: function(){
    console.log(this); //window
    console.log(typeof this); //object
    console.log(this === window); //true
    console.log('為了看效果而.'+this.name+'.已'); //為了看效果而..已
  }
};

var test = obj.objFun;
test();

這時候，你會神奇的發現，上面例子中的 this 又等於 window 了，到底是什么原因導致的呢？下面我們來分析分析：

我們首先要知道 “函數內部this的值不是靜態的”，每次你調用一個函數它總是重新求值（但這一過程發生在函數代碼實際執行之前），函數內部的this值實際上是由函數被調用的父作用域提供，更重要的是，她依賴實際函數的語法。
當函數被調用時，我們看緊鄰括號“()”的左邊。如果在括號的左側存在一個引用，傳遞給調用函數的“this”值是引用所屬於的那個對象，否則this的值就是全局對象。

我們再接着看看上面的例子，“var test = obj.objFun;” 這里表示沒有調用函數，不用管。“test();”這里調用了函數，我們發現在括號“()”的左側是一個變量test，test不是一個對象的引用，所以this的值就是全局對象。接下來，為了更深刻的理解上面的原理，我們來個更為復雜點的例子：

  var name = 'window在手，天下我有！';
  var obj = {
    name: '敲代碼的怪蜀黍',
    objBar: {
      name: 'BOBO',
      barFun: function(){
        console.log(this.name);
      }
    }
  };

  //()左側是barFun引用，它指向objBar對象，所以打印出 “BOBO”
  var test1 = obj.objBar.barFun(); //BOBO

  //()左側是test2，test2它並不是某個對象的引用，所以打印出 “window在手，天下我有！”
  var test2 = obj.objBar.barFun;
  test2(); //window在手，天下我有！

  //下面這個看起來復雜，其實抓住一點就行了：()左側是testBar，testBar並不屬於某個對象的引用，當然打印出來的還是 “window在手，天下我有！”
  var test3 = obj.objBar;
  var testBar = test3.barFun;
  testBar(); //window在手，天下我有！

####當通過new運算符來調用函數時，函數被當做一個構造函數，this指向構造函數創建出來的對象

var name = 'window在手，天下我有！';
function A(){
  console.log(this.name);
}

A(); //window在手，天下我有！

var objA = new A(); //undefined （因為objA並沒有name屬性）