一分鐘秒懂this

關(guān)于 this,很多小伙伴可能都會(huì)很痛苦,或許還會(huì)遇到這樣那樣的問題设塔。
那么碧查,如何快速的理解和掌握 this 的運(yùn)用呢庞呕?
等你看完我這篇文章,相信你一定會(huì)有一種豁然開朗的感覺繁仁。

對(duì)于 this,你只需要記住這樣一句話:
this 初始的時(shí)候并不具有指向性,
只有「當(dāng)它所在的函數(shù)被調(diào)用的時(shí)候采够,this 會(huì)指向調(diào)用方。
看完我下面的例子冰垄,你一定會(huì)瞬間秒懂~

    var d = {
        a: function (n) {
            console.log(this.c)
        },
        c: 'd.c'
    }
    var c = 'Window.c';
    d.a();

你還記得我剛才說的那句話嗎蹬癌?
this 在一開始定義的的時(shí)候并不具有指向性,
只有「當(dāng)它所在的函數(shù)被調(diào)用的時(shí)候虹茶,this 會(huì)指向調(diào)用方逝薪。
在這段代碼中,this 所在的函數(shù)是 a蝴罪,在最后一行董济,通過d.a()調(diào)用,這時(shí)洲炊,this 會(huì)指向調(diào)用 a 函數(shù)的人感局,也就是 d,所以,console.log(this.c)這句話就會(huì)變成console.log(d.c)暂衡,所以最后控制臺(tái)打印出來的結(jié)果就是d.c

怎么樣询微?是不是很簡(jiǎn)單呢?我們?cè)賮砜聪旅孢@一段代碼狂巢。

        var d = {
            a: function (n) {
               n()
            },
            c: 'd.c'
        }
        var c = 'Window.c';
        d.a(function () {
            console.log(this.c)
        });

我們用同樣的方式來分析撑毛,this所在的函數(shù)為function () { console.log(this.c) },這個(gè)函數(shù)以參數(shù)的形式傳入到 a 中,并通過代碼n()實(shí)現(xiàn)該函數(shù)的調(diào)用藻雌,那么問題來了雌续,n 本身就是這個(gè)函數(shù),他的調(diào)用者是誰呢胯杭?
在 Javascript 中驯杜,所有函數(shù)的最頂層的調(diào)用對(duì)象都為全局對(duì)象 Window,所以在這段代碼中做个,調(diào)用函數(shù) n ( 也就是 this 所在的函數(shù) ) 的那個(gè)人鸽心,就是全局對(duì)象 Window,所以console.log(this.c)這行代碼就變成了console.log(Window.c)居暖,所以最后的輸出結(jié)果就是:Window.c

看到這里顽频,你是不是有一種豁然開朗的感覺呢?
那么上面那段代碼太闺,應(yīng)該如何改才能讓他繼續(xù)輸出d.c呢糯景?
其實(shí)很簡(jiǎn)單,只要讓調(diào)用 this 所在函數(shù)的那個(gè)人是 d 對(duì)象就好了省骂。
沒錯(cuò)蟀淮,關(guān)鍵語句就是d.(function () { console.log(this.c) }),但是這樣寫太繁瑣了冀宴,如果我想在上面那段代碼的基礎(chǔ)上進(jìn)行修改灭贷,該怎么做呢?
其實(shí)也很簡(jiǎn)單略贮,只要把 n 賦值給 d 的某個(gè)新屬性(例如 d.n)甚疟,然后再調(diào)用這個(gè)方法就可以啦( d.n())。完整代碼如下:

        var d = {
            a: function (n) {
               d.n = n
               d.n()
            },
            c: 'd.c'
        }
        var c = 'Window.c';
        d.a(function () {
            console.log(this.c)
        });

看到這里逃延,你就會(huì)覺得览妖,原來 this 也沒什么大不了嘛。
不過揽祥,理解 this 只是第一步讽膏,更重要的,是要學(xué)會(huì)舉一反三拄丰,這樣才會(huì)掌握的更加扎實(shí)府树、牢固。
此外料按,this 還有很多其他方面需要注意的奄侠,但是我相信,只要你理解了我寫的這部分核心知識(shí)點(diǎn)载矿,你再去看別的關(guān)于 this 的內(nèi)容垄潮,也肯定會(huì)如魚得水,十分順利~

最后,
如果你覺得我的文章對(duì)你有幫助弯洗,
就請(qǐng)動(dòng)動(dòng)你的小手旅急,
給我點(diǎn)一個(gè)贊吧,
你的贊將會(huì)是對(duì)我的最大的鼓勵(lì)和支持~

同時(shí)牡整,
也歡迎優(yōu)秀的你給我提出寶貴的意見和建議藐吮,
我會(huì)不斷努力,
把自己打磨的越來越優(yōu)秀果正。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末炎码,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子秋泳,更是在濱河造成了極大的恐慌,老刑警劉巖攒菠,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件迫皱,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡辖众,警方通過查閱死者的電腦和手機(jī)卓起,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凹炸,“玉大人戏阅,你說我怎么就攤上這事∑∷” “怎么了奕筐?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)变骡。 經(jīng)常有香客問我离赫,道長(zhǎng),這世上最難降的妖魔是什么塌碌? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任渊胸,我火速辦了婚禮,結(jié)果婚禮上台妆,老公的妹妹穿的比我還像新娘翎猛。我一直安慰自己,他們只是感情好接剩,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布切厘。 她就那樣靜靜地躺著,像睡著了一般搂漠。 火紅的嫁衣襯著肌膚如雪迂卢。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音而克,去河邊找鬼靶壮。 笑死,一個(gè)胖子當(dāng)著我的面吹牛员萍,可吹牛的內(nèi)容都是我干的腾降。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼碎绎,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼螃壤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起筋帖,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤奸晴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后日麸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寄啼,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年代箭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了墩划。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡嗡综,死狀恐怖乙帮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情极景,我是刑警寧澤察净,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站戴陡,受9級(jí)特大地震影響塞绿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜恤批,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一异吻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧喜庞,春花似錦诀浪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至晰房,卻和暖如春求摇,著一層夾襖步出監(jiān)牢的瞬間射沟,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工与境, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留验夯,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓摔刁,卻偏偏與公主長(zhǎng)得像挥转,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子共屈,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

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

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品绑谣,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式拗引。簡(jiǎn)單...
    舟漁行舟閱讀 7,777評(píng)論 2 17
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理借宵,服務(wù)發(fā)現(xiàn),斷路器寺擂,智...
    卡卡羅2017閱讀 134,715評(píng)論 18 139
  • 與其他語言相比暇务,函數(shù)的this關(guān)鍵字在JavaScript中的表現(xiàn)略有不同,此外怔软,在嚴(yán)格模式和非嚴(yán)格模式之間也會(huì)有...
    codingC閱讀 575評(píng)論 0 0
  • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象,但只有一個(gè)實(shí)例择镇,加載時(shí)并不主動(dòng)創(chuàng)建挡逼,需要時(shí)才創(chuàng)建 最常見的單例模式,...
    Obeing閱讀 2,076評(píng)論 1 10
  • 我的外婆是一個(gè)地道的農(nóng)村人腻豌,也是一個(gè)延續(xù)了中華傳統(tǒng)美德的人家坎。她以身作則,讓我明白了活著的意義吝梅。 烈日灼...
    思想的思閱讀 679評(píng)論 2 3