Javascript 的 this 用法

this是Javascript語言的一個關鍵字。正確掌握了 JavaScript 中的 this 關鍵字,才算邁入了 JavaScript 這門語言的門檻。

this 不是變量,不是屬性,不能為其賦值,它始終指向調用它的對象。
只要記住最重要的一條即可“它始終指向調用它的對象” ,所以找到調用this的對象,就知道this到底指向誰了

它代表函數(shù)運行時,自動生成的一個內部對象,只能在函數(shù)內部使用。
下面分四種情況,詳細討論this的用法。
情況一:純粹的函數(shù)調用
這是函數(shù)的最通常用法,屬于全局性調用,因此this就代表全局對象Global。

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

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

純粹的函數(shù)調用也有感覺上似乎復雜的:

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

你不會認為彈出"true"吧,不是按照上面的理論'innerTest'是被'test'調用的,然后'this'就指向'test'嗎?
額,錯就錯在是誰調用的'innerTest', 其實這種函數(shù)都是'window'對象調用的,即使你嵌套一千層,調用各個函數(shù)的都是'window'對象,奉上下面這段代碼為證

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

情況二:作為對象方法的調用
函數(shù)還可以作為某個對象的方法調用,這時this就指這個上級對象。

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

下面的你不會認為結果為"false"吧!,'test1'和'test' 兩個都指向一個對象,所以是true。關鍵記住”this 始終指向調用它的對象“。

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();

按照上面的理論,這時 "this" 不再直接被 'test' 調用了,而是被 'test.b' 調用, 奉上下面一段代碼為證:

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

情況三 作為構造函數(shù)調用
所謂構造函數(shù),就是通過這個函數(shù)生成一個新對象(object)。這時,this就指這個新對象。

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

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

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

情況四 apply調用

apply()是函數(shù)對象的一個方法,它的作用是改變函數(shù)的調用對象,它的第一個參數(shù)就表示改變后的調用這個函數(shù)的對象。因此,this指的就是這第一個參數(shù)。

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

apply()的參數(shù)為空時,默認調用全局對象。因此,這時的運行結果為0,證明this指的是全局對象。
如果把最后一行代碼修改為: o.m.apply(o); //1
運行結果就變成了1,證明了這時this代表的是對象o。
再來一段:

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

apply作用就是”調用一個對象的一個方法,以另一個對象替換當前對象“ 所以了'window' 對象已經被替代為'test1',自然為'false'了,奉上如下代碼以為證明:

var test = function(){
     alert(this === test1);
 }
 var test1 = {
  }
test.apply(test1);  //true
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,406評論 6 538
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,034評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,165評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,559評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,781評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 49,327評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,084評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,278評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,495評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,010評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,241評論 2 375

推薦閱讀更多精彩內容

  • this是Javascript語言的一個關鍵字。 它代表函數(shù)運行時,自動生成的一個內部對象,只能在函數(shù)內部使用。比...
    魯uin閱讀 5,462評論 0 4
  • this是Javascript語言的一個關鍵字。 它代表函數(shù)運行時,自動生成的一個內部對象,只能在函數(shù)內部使用。比...
    云端漫記閱讀 157評論 0 0
  • 深入淺出 JavaScript 中的 this 在 Java 等面向對象的語言中,this 關鍵字的含義是明確且具...
    lyzaijs閱讀 692評論 0 0
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,262評論 0 4
  • 1. this之謎 在JavaScript中,this是當前執(zhí)行函數(shù)的上下文。因為JavaScript有4種不同的...
    百里少龍閱讀 1,019評論 0 3