關(guān)于this(二)

this全面解析

調(diào)用位置

在理解 this 的綁定過程之前,首先要理解調(diào)用位置:調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置(而不是聲明的位置)。函數(shù)調(diào)用位置的不同會造成 this 綁定對象的不同

最重要的是要分析調(diào)用棧(就是為了到達當(dāng)前執(zhí)行位置所調(diào)用的所有函數(shù))筒占。我們關(guān)心的調(diào)用位置就在當(dāng)前正在執(zhí)行的函數(shù)的前一個調(diào)用中。

function baz() {

// 當(dāng)前調(diào)用棧是:baz

// 因此魄健,當(dāng)前調(diào)用位置是全局作用域

console.log( "baz" );

bar(); // <-- bar 的調(diào)用位置

}

function bar() {

// 當(dāng)前調(diào)用棧是 baz -> bar

// 因此赋铝,當(dāng)前調(diào)用位置在 baz 中

console.log( "bar" );

foo(); // <-- foo 的調(diào)用位置

}

function foo() {

// 當(dāng)前調(diào)用棧是 baz -> bar -> foo

// 因此插勤,當(dāng)前調(diào)用位置在 bar 中

console.log( "foo" );

}

baz(); // <-- baz 的調(diào)用位置

調(diào)用規(guī)則

? ?1.默認(rèn)綁定

? ? ? ? 獨立函數(shù)調(diào)用沽瘦。可以把這條規(guī)則看作是無法應(yīng)用

? ? ? ? function foo() {

? ? ? ? ? ?console.log( this.a );

? ? ? ? ?}

? ? ? ? ?var a = 2;

? ? ? ? ?foo(); // 2

? ? 2.隱式綁定

? ? ? ? 對象屬性引用鏈中只有最頂層或者說最后一層會影響調(diào)用位置农尖。

function foo() {

console.log( this.a );

}

var obj2 = {

a: 42,

foo: foo

};

var obj1 = {

a: 2,

obj2: obj2

};

obj1.obj2.foo(); // 42

隱式丟失

function foo() {

console.log( this.a );

}

var obj = {

a: 2,

foo: foo

};

var bar = obj.foo; // 函數(shù)別名析恋!

var a = "oops, global"; // a 是全局對象的屬性

bar(); // "oops, global"?

雖然 bar 是 obj.foo 的一個引用,但是實際上盛卡,它引用的是 foo 函數(shù)本身助隧,因此此時的bar() 其實是一個不帶任何修飾的函數(shù)調(diào)用,因此應(yīng)用了默認(rèn)綁定滑沧。

3.顯式綁定

function foo() {

console.log( this.a );

}

var obj = {

a:2

};

foo.call( obj ); // 2

? ? 硬綁定

? ? API調(diào)用的“上下文”

? ? 都是用CALL APPLY;

4 .new綁定

? ?用 new 來調(diào)用并村,這種函數(shù)調(diào)用被稱為構(gòu)造函數(shù)調(diào)用

? ?使用 new 來調(diào)用函數(shù),或者說發(fā)生構(gòu)造函數(shù)調(diào)用時滓技,會自動執(zhí)行下面的操作哩牍。

1. 創(chuàng)建(或者說構(gòu)造)一個全新的對象。

2. 這個新對象會被執(zhí)行 [[ 原型 ]] 連接令漂。

3. 這個新對象會綁定到函數(shù)調(diào)用的 this膝昆。

4. 如果函數(shù)沒有返回其他對象丸边,那么 new 表達式中的函數(shù)調(diào)用會自動返回這個新對象。

優(yōu)先級

1. 函數(shù)是否在 new 中調(diào)用(new 綁定)荚孵?如果是的話 this 綁定的是新創(chuàng)建的對象妹窖。

? ? var bar = new foo()

2. 函數(shù)是否通過 call、apply(顯式綁定)或者硬綁定調(diào)用收叶?如果是的話骄呼,this 綁定的是指定的對象。

var bar = foo.call(obj2)

3. 函數(shù)是否在某個上下文對象中調(diào)用(隱式綁定)判没?如果是的話谒麦,this 綁定的是那個上下文對象。

var bar = obj1.foo()

4. 如果都不是的話哆致,使用默認(rèn)綁定绕德。如果在嚴(yán)格模式下,就綁定到 undefined摊阀,否則綁定到全局對象耻蛇。

var bar = foo()

被忽略的this

如果你把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind

箭頭函數(shù)

1. 只使用詞法作用域并完全拋棄錯誤 this 風(fēng)格的代碼胞此;

2. 完全采用 this 風(fēng)格臣咖,在必要時使用 bind(..),盡量避免使用 self = this 和箭頭函數(shù)漱牵。

最后編輯于
?著作權(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é)果婚禮上背捌,老公的妹妹穿的比我還像新娘。我一直安慰自己洞斯,他們只是感情好毡庆,可當(dāng)我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著烙如,像睡著了一般么抗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上亚铁,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天蝇刀,我揣著相機與錄音,去河邊找鬼徘溢。 笑死吞琐,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的然爆。 我是一名探鬼主播站粟,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼曾雕!你這毒婦竟也來了奴烙?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤剖张,失蹤者是張志新(化名)和其女友劉穎切诀,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體修械,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡趾牧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年检盼,在試婚紗的時候發(fā)現(xiàn)自己被綠了肯污。 大學(xué)時的朋友給我發(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
  • 正文 我出身青樓前计,卻偏偏與公主長得像胞谭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子男杈,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,614評論 2 353

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理丈屹,服務(wù)發(fā)現(xiàn),斷路器伶棒,智...
    卡卡羅2017閱讀 134,652評論 18 139
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持肤无,譯者再次奉上一點點福利:阿里云產(chǎn)品券先蒋,享受所有官網(wǎng)優(yōu)惠,并抽取幸運大...
    HetfieldJoe閱讀 6,926評論 15 54
  • 特別說明,為便于查閱窥翩,文章轉(zhuǎn)自https://github.com/getify/You-Dont-Know-JS...
    殺破狼real閱讀 690評論 0 1
  • this在調(diào)用時綁定业岁,完全取決于函數(shù)的調(diào)用位置。綁定規(guī)則 默認(rèn)綁定(獨立函數(shù)調(diào)用寇蚊,綁定到全局對象笔时,但嚴(yán)格模式下th...
    劉尐六閱讀 628評論 0 7
  • this 的四種綁定策略( 默認(rèn)綁定、隱式綁定仗岸、顯式綁定允耿、new 綁定 ) 默認(rèn)綁定:this 一般默認(rèn)指向全局作...
    南航閱讀 1,862評論 0 0