JavaScript中的this引用

this

this是javascript的一個關(guān)鍵字,隨著函數(shù)使用場合不同涵亏,this的值會發(fā)生變化。但是總有一個原則宠默,那就是this指的是調(diào)用函數(shù)的那個對象矛纹。

一、定義

1光稼、this是函數(shù)內(nèi)部的一個特殊對象(或this引用)--它引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象或南。

2孩等、this引用是一種在JavaScript的代碼中隨時都可以使用的只讀變量。 this引用 引用(指向)的是一個對象采够,它有著會根據(jù)代碼上下文語境自動改變其引用對象的特性肄方。它的引用規(guī)則如下:

? 在最外層代碼中,this引用 引用的是全局對象蹬癌。

? 在函數(shù)內(nèi)权她,this引用根據(jù)函數(shù)調(diào)用的方式的不同而有所不同。如下

1)構(gòu)造函數(shù)的調(diào)用--this引用 引用的是所生成的對象

2)方法調(diào)用--this引用 引用的是接收方對象

3)apply或call調(diào)用--this引用 引用的是有apply或call的參數(shù)指定的對象

4)其他方式的調(diào)用--this引用 引用的是全局對象

二逝薪、根據(jù)以上所述及網(wǎng)上的相關(guān)資料隅要,this對象(引用)的使用情況總結(jié)如下:

JavaScript是動態(tài)語言,this關(guān)鍵字在執(zhí)行的時候才能確定是誰董济。所以this永遠(yuǎn)指向調(diào)用者步清,即對“調(diào)用對象”的引用。簡單點(diǎn)說就是調(diào)用的方法屬于哪個對象虏肾,this就指向那個對象廓啊。根據(jù)函數(shù)調(diào)用方式的不同,this可以 指向全局對象封豪,當(dāng)前對象谴轮,或其他任意對象。

1吹埠、全局函數(shù)調(diào)用第步,全局函數(shù)中的this會指向全局對象window。(函數(shù)調(diào)用模式)

//代碼清單1

<script type="text/javascript">

var message ="this in window";//這一句寫在函數(shù)外面和里面是一樣效果

function func() {

if(this== window){

alert("this == window");

alert(message);

this.methodA =function() {

alert("I'm a function");

}

}

}

func();//如果不調(diào)用func方法缘琅,則里面定義的屬性或方法會取不到

methodA();

</script>

func()的調(diào)用結(jié)果為this == window粘都, this in window

methodA()的調(diào)用結(jié)果為I'm a function

2、構(gòu)造函數(shù)調(diào)用胯杭,即使用new的方式實例化一個對象驯杜,this會指向通過構(gòu)造函數(shù)生成的對象受啥。(構(gòu)造器調(diào)用模式)

代碼清單2

<script type="text/script">

function Func() {

if(this== window) {

alert("this == window");

}

else{

alert("this != window");

}

this.fieldA ="I'm a field";

alert(this);

}

var obj =newFunc();

alert(obj.fieldA);//this指向的是對象obj

</script>

3做个、對象方法的調(diào)用,this指向當(dāng)前對象滚局。任何函數(shù)居暖,只要該函數(shù)被當(dāng)做一個對象的方法使用或賦值時,該函數(shù)內(nèi)部的this都是對該對象本身的引用藤肢。也可理解為this寫在一個普通對象中太闺,this指向的就是對象本身。(方法調(diào)用模式)

(方法的定義: 作為對象屬性的函數(shù)稱為方法)

//代碼清單3

<script type="text/javascript">

var obj = {

x: 3,

doit: function(){

if(this== window){

alert("this == window");

}else{

alert("method is called: "+this.x);

}

}

};

obj.doit();//this指向的是對象obj

</script>

4嘁圈、通過apply或call方法調(diào)用省骂,this指向傳入的對象蟀淮。

apply 或call 方法可以用來代替另一個對象調(diào)用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象钞澳。如果沒有提供 thisObj 參數(shù)怠惶,那么 Global 對象被用作 thisObj。 (apply調(diào)用模式)

//代碼清單4

<script type="text/script">

var obj = {

x: 3,

doit: function(){

alert("method is called: "+this.x);

}

};

var obj2 = {x: 4};

obj.doit();//3,this指向obj

obj.doit.apply(obj2);//4,this指向obj2

obj.doit.call(obj2);//4,this指向obj2

</script>

5轧粟、原型鏈中的this --原型對象及構(gòu)造函數(shù)中的this指向新創(chuàng)建的實例對象策治。使用prototype擴(kuò)展方法可以使用this獲取到源對象的實例,私有字段無法通過原型鏈獲取兰吟。

//代碼清單5

<script type="text/javascript">

function Func() {

this.fieldA ="I'm a field";

var privateFieldA ="I'm a var";

}

Func.prototype = {

ExtendMethod:function(str) {

alert(str +" :"+this.fieldA);

alert(privateFieldA);//出錯,私有字段無法通過原型鏈獲取通惫。

}

};

var obj =newFunc();

obj.ExtendMethod("From prototype");//此時構(gòu)造函數(shù)及原型鏈中的this指向?qū)ο髈bj

</script>

6、閉包中的this --閉包:寫在function中的function混蔼,this指向全局對象window履腋。

6.1 對象中的閉包

//代碼清單6

<script type=‘"text/javascript">

var? name ="The window";

var obj = {

name:"My Object",

getNameFunc:function(){

return function(){

return this.name;

}

}

};

alert(obj.getNameFunc()());//The window

</script>

此時,閉包中的this指向全局對象window拄丰,只能取到全局對象的屬性府树。那么對象內(nèi)部的屬性(外部函數(shù)的變量)要想訪問又怎么辦呢? 把外部函數(shù)的this對象保存在一個閉包能訪問的變量就可以了料按⊙傧溃看如下代碼:

//代碼清單7

<script type="text/javascript">

var name ="The window";

var obj = {

name:"My Object",

getNameFunc:function(){

var that =this;

return function(){

return that.name;

}

}

};

alert(obj.getNameFunc()());//My object

</script>

將外部函數(shù)的this賦值給that變量,就能讀取到外部函數(shù)的變量载矿。

6.2 不管是直接引用function垄潮,還是實例化一個function,其返回的閉包函數(shù)里的this都是指向window闷盔。

//代碼清單8

<script type="text/javascript">

function a() {

alert(this== window);

var that =this;

var func =function() {

alert(this== window);

alert(that);

};

return func;

}

var b = a();

b();//true, true, [object Window]

var c =newa();

c();//false, true, [object object]

</script>

7弯洗、函數(shù)使用bind()方法綁定一個對象,this會指向傳給bind()函數(shù)的值逢勾。

<script type="text/javascript">

window.color ="red";

var obj = {color:"blue"};

function sayColor(){

alert(this.color);

}

var objSayColor = sayColor.bind(obj);

objSayColor();//blue

</script>

8牡整、內(nèi)嵌在HTML元素中的腳本段,this指向元素本身

<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj);//[object HTMLDivElement]
}
</script>

9溺拱、寫在script標(biāo)簽中:this就是指全局對象window逃贝。這個跟第一點(diǎn)的全局函數(shù)調(diào)用的全局變量一樣。

原文鏈接:http://www.cnblogs.com/thislbq/archive/2016/08/04/5738811.html





最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末迫摔,一起剝皮案震驚了整個濱河市沐扳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌句占,老刑警劉巖沪摄,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡杨拐,警方通過查閱死者的電腦和手機(jī)祈餐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來哄陶,“玉大人昼弟,你說我怎么就攤上這事∞瓤穑” “怎么了舱痘?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長离赫。 經(jīng)常有香客問我芭逝,道長,這世上最難降的妖魔是什么渊胸? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任旬盯,我火速辦了婚禮,結(jié)果婚禮上翎猛,老公的妹妹穿的比我還像新娘胖翰。我一直安慰自己,他們只是感情好切厘,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布萨咳。 她就那樣靜靜地躺著,像睡著了一般疫稿。 火紅的嫁衣襯著肌膚如雪培他。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天遗座,我揣著相機(jī)與錄音舀凛,去河邊找鬼。 笑死途蒋,一個胖子當(dāng)著我的面吹牛猛遍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播号坡,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼懊烤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了筋帖?” 一聲冷哼從身側(cè)響起奸晴,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤冤馏,失蹤者是張志新(化名)和其女友劉穎日麸,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡代箭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年墩划,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嗡综。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡乙帮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出极景,到底是詐尸還是另有隱情察净,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布盼樟,位于F島的核電站氢卡,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏晨缴。R本人自食惡果不足惜译秦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望击碗。 院中可真熱鬧筑悴,春花似錦、人聲如沸稍途。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽械拍。三九已至求摇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間殊者,已是汗流浹背狂秘。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工串纺, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓肠缨,卻偏偏與公主長得像,于是被迫代替她去往敵國和親锥咸。 傳聞我的和親對象是個殘疾皇子输硝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情党窜,實現(xiàn)同樣的效果;這時候需要使用工廠模式拗引。簡單...
    舟漁行舟閱讀 7,718評論 2 17
  • ECMAScript關(guān)鍵字 delete do else finally function in instance...
    doudou2閱讀 711評論 0 0
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,212評論 0 4
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例幌衣,加載時并不主動創(chuàng)建矾削,需要時才創(chuàng)建 最常見的單例模式壤玫,...
    Obeing閱讀 2,056評論 1 10
  • 第一章: JS簡介 從當(dāng)初簡單的語言,變成了現(xiàn)在能夠處理復(fù)雜計算和交互哼凯,擁有閉包欲间、匿名函數(shù), 甚至元編程等...
    LaBaby_閱讀 1,640評論 0 6