前端面試面試必備之JavaScript的this用法

this是Javascript語言的一個關鍵字。
它代表函數(shù)運行時选泻,自動生成的一個內(nèi)部對象乏沸,只能在函數(shù)內(nèi)部使用淫茵。比如

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

隨著函數(shù)使用場合的不同,this的值會發(fā)生變化蹬跃。但是有一個總的原則匙瘪,那就是this指向的是铆铆,調(diào)用函數(shù)的那個對象

下面分四種情況丹喻,詳細討論this的用法

一薄货、純粹的函數(shù)調(diào)用

這是函數(shù)的最通用方法,屬于全局調(diào)用碍论,因此this就代表全局對象Global谅猾。
請看下面這段代碼,他的運行結(jié)果是1

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

test() //1

為了證明this就是全局對象鳍悠,我對代碼做一些改變

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

test(); //1

運行結(jié)果還是1.再變一下:

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

test();
alert(x) //0

二税娜、作為對象方法的調(diào)用

函數(shù)還可以作為某個對象的方法調(diào)用,這時this指向這個對象

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

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

三藏研、作為構(gòu)造函數(shù)調(diào)用

所謂構(gòu)造函數(shù)敬矩,就是通過這個函數(shù)生成一個新的對象(object).這是,this指向的就是這個新對象

function test(){
  this.x = 1//相當于動態(tài)創(chuàng)建屬性
}
var o = new test()
alert(0.x); //1

運行結(jié)果為1蠢挡。為了表明這時this不是全局對象弧岳,我對代碼做一些改變:

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

運行結(jié)果為2,表明全局變量X的值根本沒變

四业踏、apply調(diào)用

apply()是函數(shù)對象的一個方法禽炬,它的作用是改變函數(shù)的調(diào)用對象,它的第一個參數(shù)就表示改變后的調(diào)用這個函數(shù)的對象勤家。因此腹尖,this指向的就是第一個參數(shù)

var x = 0;
function test(){
 alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m.apply()//執(zhí)行test函數(shù) 修改this指向

apply()的參數(shù)為空時,默認調(diào)用全局對象却紧,因此桐臊,這是的運行結(jié)果為0,證明this指的是全局對象
如果把最后一行代碼修改為

o.m.apply(o); //1
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末晓殊,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子伤提,更是在濱河造成了極大的恐慌巫俺,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肿男,死亡現(xiàn)場離奇詭異介汹,居然都是意外死亡,警方通過查閱死者的電腦和手機舶沛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門嘹承,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人如庭,你說我怎么就攤上這事叹卷。” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵骤竹,是天一觀的道長帝牡。 經(jīng)常有香客問我,道長蒙揣,這世上最難降的妖魔是什么靶溜? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮懒震,結(jié)果婚禮上罩息,老公的妹妹穿的比我還像新娘。我一直安慰自己个扰,他們只是感情好瓷炮,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锨匆,像睡著了一般崭别。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上恐锣,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天茅主,我揣著相機與錄音,去河邊找鬼土榴。 笑死诀姚,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的玷禽。 我是一名探鬼主播赫段,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼矢赁!你這毒婦竟也來了糯笙?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤撩银,失蹤者是張志新(化名)和其女友劉穎给涕,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體额获,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡够庙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了抄邀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耘眨。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖境肾,靈堂內(nèi)的尸體忽然破棺而出剔难,到底是詐尸還是另有隱情胆屿,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布钥飞,位于F島的核電站莺掠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏读宙。R本人自食惡果不足惜彻秆,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望结闸。 院中可真熱鬧唇兑,春花似錦、人聲如沸桦锄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽结耀。三九已至留夜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間图甜,已是汗流浹背碍粥。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留黑毅,地道東北人嚼摩。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像矿瘦,于是被迫代替她去往敵國和親枕面。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

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

  • 函數(shù)和對象 1缚去、函數(shù) 1.1 函數(shù)概述 函數(shù)對于任何一門語言來說都是核心的概念潮秘。通過函數(shù)可以封裝任意多條語句,而且...
    道無虛閱讀 4,556評論 0 5
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,233評論 0 4
  • 函數(shù)參數(shù)的默認值 基本用法 在ES6之前易结,不能直接為函數(shù)的參數(shù)指定默認值唇跨,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,382評論 0 1
  • 今早遇到一個“落榜”的學生衬衬,小A,她見到我直接轉(zhuǎn)頭而走改橘,那眼神那姿態(tài)我就知道她對于當時沒通過考試耿耿于懷滋尉。當時她的...
    我是唧唧喳喳閱讀 280評論 0 0
  • 【情景】 四六級的日子一天一天靠近了狮惜,你的單詞背了多少呢高诺?有人會說,我早就開始背單詞了碾篡,一天背100個虱而,堅持好久了...
    SHULEA閱讀 381評論 1 1