Javascript 的 this 用法

this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字实束。正確掌握了 JavaScript 中的 this 關(guān)鍵字,才算邁入了 JavaScript 這門(mén)語(yǔ)言的門(mén)檻逊彭。

this 不是變量,不是屬性构订,不能為其賦值侮叮,它始終指向調(diào)用它的對(duì)象。
只要記住最重要的一條即可“它始終指向調(diào)用它的對(duì)象” 悼瘾,所以找到調(diào)用this的對(duì)象囊榜,就知道this到底指向誰(shuí)了

它代表函數(shù)運(yùn)行時(shí),自動(dòng)生成的一個(gè)內(nèi)部對(duì)象亥宿,只能在函數(shù)內(nèi)部使用卸勺。
下面分四種情況,詳細(xì)討論this的用法烫扼。
情況一:純粹的函數(shù)調(diào)用
這是函數(shù)的最通常用法曙求,屬于全局性調(diào)用,因此this就代表全局對(duì)象Global。

function test(){
    this.x = 1;
    alert(this.x);
  }
test(); // 1

var test = function(){
  alert(this === window);
 }
test(); //true

純粹的函數(shù)調(diào)用也有感覺(jué)上似乎復(fù)雜的:

var test = function(){
  var innerTest = function(){
   alert(this === test);
  }
  innerTest();
 }
test();

你不會(huì)認(rèn)為彈出"true"吧悟狱,不是按照上面的理論'innerTest'是被'test'調(diào)用的静浴,然后'this'就指向'test'嗎?
額挤渐,錯(cuò)就錯(cuò)在是誰(shuí)調(diào)用的'innerTest', 其實(shí)這種函數(shù)都是'window'對(duì)象調(diào)用的苹享,即使你嵌套一千層,調(diào)用各個(gè)函數(shù)的都是'window'對(duì)象,奉上下面這段代碼為證

var test = function(){
     var innerTest = function(){
           alert(this === window);  //true
           var innerTest1 = function(){
                  alert(this === window);  //true
            }
           innerTest1();
     }
     innerTest(); 
}
test();

情況二:作為對(duì)象方法的調(diào)用
函數(shù)還可以作為某個(gè)對(duì)象的方法調(diào)用浴麻,這時(shí)this就指這個(gè)上級(jí)對(duì)象得问。

function test(){
    alert(this.x);
  }
var obj = {};
obj.x = 1;
obj.m = test; //作為對(duì)象的方法調(diào)用
obj.m(); //1

下面的你不會(huì)認(rèn)為結(jié)果為"false"吧!软免,'test1'和'test' 兩個(gè)都指向一個(gè)對(duì)象宫纬,所以是true。關(guān)鍵記住”this 始終指向調(diào)用它的對(duì)象“或杠。

var test ={
  'a':1,
  'b':function(){
   alert(this === test)
  }
 }
var test1 = test;
test1.b();  //true

下面是 "true" 還是 "false" 呢哪怔?

var test ={
     'a':1,
     'b':{
           'b1':function(){
           alert(this === test);
         }
     }
 }
test.b.b1();

按照上面的理論,這時(shí) "this" 不再直接被 'test' 調(diào)用了向抢,而是被 'test.b' 調(diào)用, 奉上下面一段代碼為證:

var test ={
     'a':1,
     'b':{
             'b1':function(){
             alert(this === test.b);
          }
     }
 }
test.b.b1();  //true

情況三 作為構(gòu)造函數(shù)調(diào)用
所謂構(gòu)造函數(shù)认境,就是通過(guò)這個(gè)函數(shù)生成一個(gè)新對(duì)象(object)。這時(shí)挟鸠,this就指這個(gè)新對(duì)象叉信。

function test(){
 this.x = 1;
}
var o = new test();
alert(o.x); // 1

下面構(gòu)造函數(shù)”new test()“創(chuàng)建了一個(gè)新的空對(duì)象,然后再由這個(gè)對(duì)象指向函數(shù)"test"中的代碼艘希,因此此時(shí)this不在是window對(duì)象硼身,而是該構(gòu)造函數(shù)創(chuàng)建的新對(duì)象

var test = function(){
  alert(this === window);
 }
new test();  //false

情況四 apply調(diào)用

apply()是函數(shù)對(duì)象的一個(gè)方法,它的作用是改變函數(shù)的調(diào)用對(duì)象覆享,它的第一個(gè)參數(shù)就表示改變后的調(diào)用這個(gè)函數(shù)的對(duì)象佳遂。因此,this指的就是這第一個(gè)參數(shù)撒顿。

var x = 0;
  function test(){
    alert(this.x);
  }
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0

apply()的參數(shù)為空時(shí)丑罪,默認(rèn)調(diào)用全局對(duì)象。因此凤壁,這時(shí)的運(yùn)行結(jié)果為0吩屹,證明this指的是全局對(duì)象。
如果把最后一行代碼修改為: o.m.apply(o); //1
運(yùn)行結(jié)果就變成了1拧抖,證明了這時(shí)this代表的是對(duì)象o煤搜。
再來(lái)一段:

var test = function(){
  alert(this === window);
 }
var test1 = {
}
test.apply(test1); //false

apply作用就是”調(diào)用一個(gè)對(duì)象的一個(gè)方法,以另一個(gè)對(duì)象替換當(dāng)前對(duì)象“ 所以了'window' 對(duì)象已經(jīng)被替代為'test1'唧席,自然為'false'了,奉上如下代碼以為證明:

var test = function(){
     alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1);  //true
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末擦盾,一起剝皮案震驚了整個(gè)濱河市嘲驾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌厌衙,老刑警劉巖距淫,帶你破解...
    沈念sama閱讀 211,884評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異婶希,居然都是意外死亡榕暇,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)喻杈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)彤枢,“玉大人,你說(shuō)我怎么就攤上這事筒饰〗煞龋” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,435評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵瓷们,是天一觀的道長(zhǎng)业栅。 經(jīng)常有香客問(wèn)我,道長(zhǎng)谬晕,這世上最難降的妖魔是什么碘裕? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,509評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮攒钳,結(jié)果婚禮上帮孔,老公的妹妹穿的比我還像新娘伟墙。我一直安慰自己屁柏,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,611評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布餐弱。 她就那樣靜靜地躺著焕檬,像睡著了一般姆坚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上实愚,一...
    開(kāi)封第一講書(shū)人閱讀 49,837評(píng)論 1 290
  • 那天旷偿,我揣著相機(jī)與錄音,去河邊找鬼爆侣。 笑死,一個(gè)胖子當(dāng)著我的面吹牛幢妄,可吹牛的內(nèi)容都是我干的兔仰。 我是一名探鬼主播,決...
    沈念sama閱讀 38,987評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼蕉鸳,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼乎赴!你這毒婦竟也來(lái)了忍法?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,730評(píng)論 0 267
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤榕吼,失蹤者是張志新(化名)和其女友劉穎饿序,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體羹蚣,經(jīng)...
    沈念sama閱讀 44,194評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡原探,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,525評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了顽素。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咽弦。...
    茶點(diǎn)故事閱讀 38,664評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖胁出,靈堂內(nèi)的尸體忽然破棺而出型型,到底是詐尸還是另有隱情,我是刑警寧澤全蝶,帶...
    沈念sama閱讀 34,334評(píng)論 4 330
  • 正文 年R本政府宣布闹蒜,位于F島的核電站,受9級(jí)特大地震影響抑淫,放射性物質(zhì)發(fā)生泄漏绷落。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,944評(píng)論 3 313
  • 文/蒙蒙 一丈冬、第九天 我趴在偏房一處隱蔽的房頂上張望嘱函。 院中可真熱鬧,春花似錦埂蕊、人聲如沸往弓。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,764評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)函似。三九已至,卻和暖如春喉童,著一層夾襖步出監(jiān)牢的瞬間撇寞,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,997評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工堂氯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蔑担,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,389評(píng)論 2 360
  • 正文 我出身青樓咽白,卻偏偏與公主長(zhǎng)得像啤握,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子晶框,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,554評(píng)論 2 349

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

  • this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字排抬。 它代表函數(shù)運(yùn)行時(shí)懂从,自動(dòng)生成的一個(gè)內(nèi)部對(duì)象,只能在函數(shù)內(nèi)部使用蹲蒲。比...
    魯uin閱讀 5,459評(píng)論 0 4
  • this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字番甩。 它代表函數(shù)運(yùn)行時(shí),自動(dòng)生成的一個(gè)內(nèi)部對(duì)象届搁,只能在函數(shù)內(nèi)部使用缘薛。比...
    云端漫記閱讀 151評(píng)論 0 0
  • 深入淺出 JavaScript 中的 this 在 Java 等面向?qū)ο蟮恼Z(yǔ)言中,this 關(guān)鍵字的含義是明確且具...
    lyzaijs閱讀 666評(píng)論 0 0
  • 第5章 引用類(lèi)型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類(lèi)型 使用基本類(lèi)型...
    大學(xué)一百閱讀 3,216評(píng)論 0 4
  • 1. this之謎 在JavaScript中咖祭,this是當(dāng)前執(zhí)行函數(shù)的上下文掩宜。因?yàn)镴avaScript有4種不同的...
    百里少龍閱讀 990評(píng)論 0 3