一、前言: 我們知道 “this” 是javascript語言的一個關鍵字,在編寫javascript代碼的時候,經常會見到或者用到它。 但是,有一部分開發朋友,對 “this” 一知半解,下麵我們就一起來探討學習下javascript中 “this” 的具體含義吧! 二、This總結: 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屬性)