js中“this”變量的使用

各位小主好孕锄。
在js中this變量不可謂說不強大已慢,有種變幻莫測的趕腳。深入理解this變量,有助于各位小主更好的理解和編寫面向對象柔滔。

對于this變量最要的是能夠理清this所引用的對象到底是哪一個溢陪,也許很多資料上都有自己的解釋,但有些概念講的偏繁雜睛廊。而我的理解是:首先分析this所在的函數是當做哪個對象的方法調用的形真,則該對象就是this所引用的對象。
示例一

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //彈出 100 

這段代碼很容易理解吧超全,相信只要稍微有點基礎的都會明天咆霜,當執(zhí)行 obj.y() 時,函數是作為對象obj的方法調用的嘶朱,因此函數體內的this指向的是obj對象蛾坯,因而會彈出100。 OK疏遏,我們繼續(xù)往下看
示例二

var checkThis = function(){ 
      alert( this.x); 
}; 
var x = 'this is a property of window'; 

var obj = {}; 

obj.x = 100; 

obj.y = function(){ 

  alert( this.x ); 

}; 
obj.y(); //彈出 100 

checkThis(); //彈出 'this is a property of window' 

咦脉课?奇怪,這里為什么會彈出 'this is a property of window'改览,相信有些人會感到迷惑表示驚訝下翎。其實不難理解,在js的變量作用域里有一條規(guī)則“全局變量都是window對象的屬性”宝当。當執(zhí)行checkThis() 時相當于window.checkThis()视事,因此,此時checkThis函數體內的this關鍵字的指向變成了window對象庆揩,而又因為window對象有一個x屬性('thisis a property of window'),所以會彈出 'thisis a property of window'俐东。

上面的兩個示例都是比較容易理解的,因為只要判斷出當前函數是作為哪個對象的方法調用(被哪個對象調用)的订晌,就可以很容易的判斷出當前this變量的指向虏辫。 那么下面加點料。

this.x 與apply()锈拨、call()
我們知道砌庄,通過call和apply可以重新定義函數的執(zhí)行環(huán)境,即this的指向奕枢,一種十分常見的用法娄昆。
示例三:call()

function changeStyle( type , value ){ 

      this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.call( one , 'fontSize' , '100px' ); 

changeStyle('fontSize' , '300px'); //出現(xiàn)錯誤,因為此時changeStyle中this引用的是window對象缝彬,而window并無style屬性萌焰。 

注意changeStyle.call()中有三個參數,第一個參數用于指定該函數將被哪個對象所調用谷浅。這里指定了one扒俯,也就意味著奶卓,changeStyle函數將被one調用,因此函數體內this指向是one對象撼玄。而第二個和第三個參數對應的是changeStyle函數里的type和value兩個形參夺姑。最總我們看到的效果是Dom元素one的字體變成了20px。

示例四:apply()

function changeStyle( type , value ){ 

      this.style[ type ] = value; 

} 

var one = document.getElementByIdx( 'one' ); 

changeStyle.apply( one , ['fontSize' , '100px' ]); 

changeStyle('fontSize' , '300px'); //出現(xiàn)錯誤互纯,原因同示例三

apply的用法和call大致相同瑟幕,只有一點區(qū)別,apply只接受兩個參數留潦,第一個參數和call相同只盹,第二個參數必須是一個數組,數組中的元素對應的就是函數的形參兔院。

無意義(詭異)的this用處
示例五

var obj = { 
  x : 100, 
  y : function(){ 
        setTimeout( 
         function(){ alert(this.x); } //這里的this指向的是window對象殖卑,并不是我們期待的      obj,所以會彈出undefined 
      , 2000); 
  } 
}; 
obj.y(); 

想要達到預期效果需要

var obj = { 

    x : 100, 

    y : function(){ 

         var that = this; 

        setTimeout( 

        function(){ alert(that.x); } 

      , 2000); 

    } 

}; 

obj.y(); //彈出100 

事件監(jiān)聽函數中的this

var one = document.getElementByIdx( 'one' ); 

one.onclick = function(){ 

alert( this.innerHTML ); //this指向的是one元素,這點十分簡單.. 

}; 

注意:js中的全局變量都會動態(tài)添加到Window 的實例 window坊萝,作為其屬性孵稽。

this是js的一個關鍵字,隨著函數使用場合不同十偶,this的值會發(fā)生變化菩鲜。但是總有一個原則,那就是this指的是調用函數的那個對象惦积。

1接校、純粹函數調用

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

這里的this就是全局變量∈ū溃看下面的例子就能很好的理解其實this就是全局對象Global蛛勉。

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

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

2、作為方法調用睦柴,那么this就是指這個上級對象诽凌。

function test() { 
    alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m(); //1 

3、作為構造函數調用坦敌。所謂構造函數侣诵,就是生成一個新的對象。這時狱窘,這個this就是指這個對象杜顺。

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

4、apply調用 this指向的是apply中的第一個參數训柴。

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

當apply沒有參數時哑舒,表示為全局對象妇拯。所以值為0幻馁。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末洗鸵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子仗嗦,更是在濱河造成了極大的恐慌膘滨,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件稀拐,死亡現(xiàn)場離奇詭異火邓,居然都是意外死亡,警方通過查閱死者的電腦和手機德撬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門铲咨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蜓洪,你說我怎么就攤上這事纤勒。” “怎么了隆檀?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵烹困,是天一觀的道長盖溺。 經常有香客問我,道長,這世上最難降的妖魔是什么搔扁? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮敲才,結果婚禮上晦墙,老公的妹妹穿的比我還像新娘。我一直安慰自己鉴逞,他們只是感情好记某,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著构捡,像睡著了一般液南。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上勾徽,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天滑凉,我揣著相機與錄音,去河邊找鬼喘帚。 笑死畅姊,一個胖子當著我的面吹牛,可吹牛的內容都是我干的吹由。 我是一名探鬼主播若未,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼倾鲫!你這毒婦竟也來了粗合?” 一聲冷哼從身側響起萍嬉,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎隙疚,沒想到半個月后壤追,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡供屉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年行冰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伶丐。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡悼做,死狀恐怖,靈堂內的尸體忽然破棺而出哗魂,到底是詐尸還是另有隱情贿堰,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布啡彬,位于F島的核電站羹与,受9級特大地震影響,放射性物質發(fā)生泄漏庶灿。R本人自食惡果不足惜纵搁,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望往踢。 院中可真熱鬧腾誉,春花似錦、人聲如沸峻呕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瘦癌。三九已至猪贪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間讯私,已是汗流浹背热押。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留斤寇,地道東北人桶癣。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像娘锁,于是被迫代替她去往敵國和親牙寞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創(chuàng)建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,233評論 0 4
  • title: js面向對象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618閱讀 568評論 0 2
  • 1. this之謎 在JavaScript中莫秆,this是當前執(zhí)行函數的上下文间雀。因為JavaScript有4種不同的...
    百里少龍閱讀 994評論 0 3
  • 導語 不得不說尤慰,作為一名初級的前端開發(fā)者,this關鍵字這個問題對于我來說一直是一個痛點雷蹂,什么是this?什么是函...
    Nicole_tiny閱讀 530評論 0 4
  • 第一部分 準入訓練 第1章 進入忍者世界 js開發(fā)人員通常使用js庫來實現(xiàn)通用和可重用的功能杯道。這些庫需要簡單易用匪煌,...
    如201608閱讀 1,349評論 1 2