this的用法整理

function關(guān)鍵字函數(shù)前提下

籠統(tǒng)的原則:非嚴(yán)格模式下,當(dāng)this用于函數(shù)內(nèi)部的時(shí)候恢准,this的指向在函數(shù)調(diào)用階段才確定钧椰,它永遠(yuǎn)指向調(diào)用函數(shù)的那個(gè)對(duì)象怨愤。

情形 this指向
由A元素觸發(fā)事件 A元素
調(diào)用A對(duì)象內(nèi)的B方法寞缝,B方法內(nèi)有this A對(duì)象
new A函數(shù)癌压,A函數(shù)內(nèi)有this new出的對(duì)象
非嚴(yán)格模式,全局函數(shù)內(nèi)有this window
嚴(yán)格模式荆陆,全局函數(shù)內(nèi)有this undefined
延時(shí)函數(shù)(setTimeout等)內(nèi)有this window

箭頭函數(shù)前提下

原則:箭頭函數(shù)前提下滩届,this指向在任何前提下都只有唯一一種可能性。

情形 this指向
箭頭函數(shù)中的this 箭頭函數(shù)所在作用域的上一級(jí)作用域中的this

詳解

(一)this在全局作用域永遠(yuǎn)指向window

this.a = 1;
alert(window.a); // 1

(二)在全局環(huán)境運(yùn)行函數(shù)被啼,因?yàn)檎{(diào)用函數(shù)的是window帜消,所以this指向全局對(duì)象,即window

function test(){
    this.x = 1;
}
test();
window.x; // 1浓体,說明this的確指向了window

嚴(yán)格模式下又有不同:

"use strict";
function test(){
    this.x = 1;
}
test();
window.x; // Cannot set property 'x' of undefined(…)

嚴(yán)格模式這么做的用意是泡挺,禁止函數(shù)內(nèi)的this關(guān)鍵字指向全局對(duì)象,避免莫名其妙的錯(cuò)誤命浴。

(三)函數(shù)被賦值給對(duì)象的方法娄猫,則調(diào)用函數(shù)的是對(duì)象,所以this指向這個(gè)對(duì)象

function test(){
    alert(this.a);
}
var o = {};
o.a = 1;
o.b = test;
o.b(); // 彈出1
function test(){
    alert(this.a);
}
var a = 1; // 等同于window.a = 1
var o = test; // 等同于window.o = test;生闲,this指向window
o(); // 等同于window.o()媳溺,彈出1

(四)函數(shù)是構(gòu)造函數(shù)時(shí),new出的實(shí)例對(duì)象調(diào)用構(gòu)造函數(shù)碍讯,所以this指向new出的實(shí)例對(duì)象

function test(){
    this.a = 1;
}
var o = new test();
console.log(o.a); // 1

(五)apply()用法悬蔽、call()用法以及bind()用法

函數(shù)對(duì)象的call()方法和apply()方法

ES5引入的函數(shù)對(duì)象的bind()方法

apply()、call()的作用一句話說就是:傳入別的this冲茸,繼而改變this屯阀;后面的參數(shù)是贈(zèng)送的,可以不寫轴术。

下面這道題难衰,改變this指向不是目的,將數(shù)組作為一系列參數(shù)傳給Math.max才是目的逗栽。

var numbers = [5, 6, 2, 3, 7, 11];
var max = Math.max.apply(null, numbers);
console.log(max);

怎么理解Math.max.apply(null, numbers)盖袭?apply做3件事:

  1. 傳入this指向,也就是傳入了null彼宠,這時(shí)候this指向window鳄虱。但其實(shí)這不是目的。

  2. numbers雖然是數(shù)組凭峡,但是會(huì)被apply拆成一個(gè)個(gè)參數(shù)傳給Math.max拙已,因?yàn)?code>Math.max只接受一個(gè)個(gè)參數(shù)。

  3. 執(zhí)行一次Math.max摧冀。

總結(jié)

以上五種綁定規(guī)則倍踪,去掉沒什么用的在全局作用域的this系宫,其他四種規(guī)則的使用先后推斷如下:

  1. 看函數(shù)是否在 new 中調(diào)用(new 綁定)?如果是的話 this 綁定的是新創(chuàng)建的對(duì)象(即bar)建车。

var bar = new foo();

  1. 看函數(shù)是否通過 call扩借、apply (顯式綁定)?如果是的話缤至,this 綁定的是指定的對(duì)象(即obj2)潮罪。

var bar = foo.call(obj2);

  1. 看函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用(隱式綁定)?如果是的話领斥,this 綁定的是那個(gè)上下文對(duì)象(即obj1)嫉到。

var bar = obj1.foo();

如果都不是的話,使用默認(rèn)綁定戒突。如果在嚴(yán)格模式下屯碴,就綁定到 undefined,否則綁定到全局對(duì)象膊存。

var bar = foo();

做面試題

參考別人寫的http://www.reibang.com/p/de47c2f9d178 吧导而。比我總結(jié)的牛逼,我個(gè)人非常喜歡這種應(yīng)試方式隔崎。

關(guān)于JavaScript函數(shù)執(zhí)行環(huán)境的過程今艺,IBM developerworks文檔庫(kù)中的一段描述感覺很不錯(cuò),摘抄如下:

“JavaScript 中的函數(shù)既可以被當(dāng)作普通函數(shù)執(zhí)行爵卒,也可以作為對(duì)象的方法執(zhí)行虚缎,這是導(dǎo)致 this 含義如此豐富的主要原因。一個(gè)函數(shù)被執(zhí)行時(shí)钓株,會(huì)創(chuàng)建一個(gè)執(zhí)行環(huán)境(ExecutionContext)实牡,函數(shù)的所有的行為均發(fā)生在此執(zhí)行環(huán)境中,構(gòu)建該執(zhí)行環(huán)境時(shí)轴合,JavaScript 首先會(huì)創(chuàng)建 arguments變量创坞,其中包含調(diào)用函數(shù)時(shí)傳入的參數(shù)。接下來創(chuàng)建作用域鏈受葛。然后初始化變量题涨,首先初始化函數(shù)的形參表,值為 arguments變量中對(duì)應(yīng)的值总滩,如果 arguments變量中沒有對(duì)應(yīng)值纲堵,則該形參初始化為 undefined。如果該函數(shù)中含有內(nèi)部函數(shù)闰渔,則初始化這些內(nèi)部函數(shù)席函。如果沒有,繼續(xù)初始化該函數(shù)內(nèi)定義的局部變量冈涧,需要注意的是此時(shí)這些變量初始化為 undefined向挖,其賦值操作在執(zhí)行環(huán)境(ExecutionContext)創(chuàng)建成功后蝌以,函數(shù)執(zhí)行時(shí)才會(huì)執(zhí)行,這點(diǎn)對(duì)于我們理解 JavaScript 中的變量作用域非常重要何之。

鑒于篇幅,我們先不在這里討論這個(gè)話題咽筋。最后為 this變量賦值溶推,如前所述,會(huì)根據(jù)函數(shù)調(diào)用方式的不同奸攻,賦給 this全局對(duì)象蒜危,當(dāng)前對(duì)象等。至此函數(shù)的執(zhí)行環(huán)境(ExecutionContext)創(chuàng)建成功睹耐,函數(shù)開始逐行執(zhí)行辐赞,所需變量均從之前構(gòu)建好的執(zhí)行環(huán)境(ExecutionContext)中讀取∠跹担”

理解這段話對(duì)于理解Javascript函數(shù)將大有好處响委。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市窖梁,隨后出現(xiàn)的幾起案子赘风,更是在濱河造成了極大的恐慌,老刑警劉巖纵刘,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件邀窃,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡假哎,警方通過查閱死者的電腦和手機(jī)瞬捕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來舵抹,“玉大人肪虎,你說我怎么就攤上這事√透福” “怎么了笋轨?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)赊淑。 經(jīng)常有香客問我爵政,道長(zhǎng),這世上最難降的妖魔是什么陶缺? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任钾挟,我火速辦了婚禮,結(jié)果婚禮上饱岸,老公的妹妹穿的比我還像新娘掺出。我一直安慰自己徽千,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布汤锨。 她就那樣靜靜地躺著双抽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪闲礼。 梳的紋絲不亂的頭發(fā)上牍汹,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天,我揣著相機(jī)與錄音柬泽,去河邊找鬼慎菲。 笑死,一個(gè)胖子當(dāng)著我的面吹牛锨并,可吹牛的內(nèi)容都是我干的露该。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼第煮,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼解幼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起空盼,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤书幕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后揽趾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體台汇,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年篱瞎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了苟呐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡俐筋,死狀恐怖牵素,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情澄者,我是刑警寧澤笆呆,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站粱挡,受9級(jí)特大地震影響赠幕,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜询筏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一榕堰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嫌套,春花似錦逆屡、人聲如沸圾旨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽砍的。三九已至,卻和暖如春莺治,著一層夾襖步出監(jiān)牢的瞬間挨约,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工产雹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人翁锡。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓蔓挖,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親馆衔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子瘟判,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)角溃,斷路器拷获,智...
    卡卡羅2017閱讀 134,707評(píng)論 18 139
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持匆瓜,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠未蝌,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 6,926評(píng)論 15 54
  • 特別說明萧吠,為便于查閱左冬,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 697評(píng)論 0 1
  • 1. this之謎 在JavaScript中,this是當(dāng)前執(zhí)行函數(shù)的上下文纸型。因?yàn)镴avaScript有4種不同的...
    百里少龍閱讀 1,010評(píng)論 0 3
  • 今天去市場(chǎng)停車時(shí)拇砰,人家門臉不愿意了,說要擺攤狰腌。這明顯是胡說除破,不管是不是胡說,今天是集癌别,人家自己停車皂岔,還有卸貨都要用...
    69b0b8230937閱讀 225評(píng)論 0 0