摘要:關(guān)于中的指向我上的菜鳥倉庫地址點(diǎn)擊跳轉(zhuǎn)查看其他相關(guān)文章文章在我的博客上的地址點(diǎn)擊跳轉(zhuǎn)學(xué)習(xí),必不可少的肯定要理解的指向。
關(guān)于javascript中this的指向
? ? ? ? 學(xué)習(xí)javascript,必不可少的肯定要理解this的指向。要學(xué)習(xí)this指向之前,就要先理解了我前面寫的幾篇文章,會更容易理解this的指向。
? ? ? ? 前面的文章說到, 執(zhí)行上下文的創(chuàng)建階段,主要有三個內(nèi)容:
? ? ? ? 1、創(chuàng)建變量對象;2、初始化作用域鏈;3、確定this的指向。
? ? ? ? 前兩個內(nèi)容我都作了詳細(xì)的解析了,在這里,是時(shí)候要說一下第三個內(nèi)容了,確定this的指向。其實(shí)this的指向從一些理論知識上理解,是很復(fù)雜的,看過不少文章都沒有說的很清楚,反而說得人懵逼了。其實(shí),this的指向是非常簡單的,明確了它的規(guī)律,不要被太多代碼表達(dá)形式的改變而影響了正常的認(rèn)識思維,那就可以了。
? ? ? ? 好了,來個普遍例子:
//全局環(huán)境 var a = 10; function inner(){ var a = 20; console.log(this.a); } inner();
? ? ? ? 當(dāng)然了,打印結(jié)果是10,this就是指向全局對象。
? ? ? ? 好了,該解析this了,我們都知道this的指向是函數(shù)被調(diào)用的時(shí)候確定的。
? ? ? ? 簡單直接說結(jié)論:通過對象訪問屬性的方式執(zhí)行函數(shù),this就是指向這個對象,其他情況,嚴(yán)格模式下都是指向undefined,非嚴(yán)格模式下都是指向全局對象。
? ? ? ? 先解析上面例子,上面的inner函數(shù)是在全局環(huán)境中直接調(diào)用的:inner( ? ),大家可以理解這個調(diào)用,就是這一對方括號(),所以它是指向全局對象,所以this.a就是10。
//全局環(huán)境 var a = 10; var example = { a : 20, b : this.a + 10 } console.log(example.b);
? ? ? ? 打印結(jié)果是多少?30嗎?錯了,不是通過example這個對象訪問b屬性,所以b里面的this就是指向example嗎?錯了。
? ? ? ? 我說的是對象訪問屬性的方式執(zhí)行函數(shù),你這個b屬性內(nèi)容不是函數(shù)。由于example是在全局環(huán)境中聲明的,所以里面的this就是指向全局對象,或者說,this的確定是函數(shù)被執(zhí)行時(shí)候確定的,你的函數(shù)呢?往上找,就是全局對象這個大函數(shù)了,所以這個this就是指向全局對象。
? ? ? ? 當(dāng)然了,如果你將example放進(jìn)去某個函數(shù)里面,對照一下我的結(jié)論,就會知道這個this在嚴(yán)格模式下就會指向undefined,非嚴(yán)格模式就是指向全局對象。例子如下:
//非嚴(yán)格模式下的全局環(huán)境 var a = 10; function outer(){ var example = { a : 20, b : this.a + 10 } return example.b; } outer();//打印結(jié)果為20
//嚴(yán)格模式下的全局環(huán)境 "use strict" var a = 10; function outer(){ var example = { a : 20, b : this.a + 10 } return example.b; } outer();//執(zhí)行會報(bào)錯,因?yàn)閠his指向undefined
? ? ? ? 還問為什么?因?yàn)閛uter函數(shù)被執(zhí)行時(shí)候這個this才確定啊,而outer這個函數(shù)是多帶帶調(diào)用啊,直接outer( ?)這樣調(diào)用啊,所以就是結(jié)論中那樣啊。
? ? ? ? 好了,那怎樣是屬于對象訪問屬性的方式執(zhí)行函數(shù)呢?再來例子:
//全局環(huán)境 var a = 10; var example = { a : 20, b : function(){ return this.a; } } console.log(example.b());
? ? ? ? 好了,這次打印結(jié)果是20了,因?yàn)橥ㄟ^了example訪問b屬性方式執(zhí)行函數(shù)的,通過這個一點(diǎn)運(yùn)算符的屬性訪問方式,叫做成員訪問。稍微改改再來例子:
//全局環(huán)境 var a = 10; var example = { a : 20, b : function(){ return this.a; } } var c = example.b; console.log(c());
? ? ? ? 還是20嗎?不是了,非嚴(yán)格模式是10,嚴(yán)格模式報(bào)錯(后面都是非嚴(yán)格模式的例子),因?yàn)檎{(diào)用函數(shù)c,前面只是通過example.b將函數(shù)的地址傳給了c而已,你調(diào)用函數(shù)時(shí)候,還是多帶帶調(diào)用啊。開始懂了對不對,再來例子:
//全局環(huán)境 var a = 10; function runAway(){ return this.a; } var example = { a : 20, b : runAway } console.log(example.b());
? ? ? ? 如果你不假思索就能說是20的話,證明你已邁出了一大步了,同一個道理,是通過對象訪問屬性的方式執(zhí)行函數(shù)的,我管你的b屬性是直接指向函數(shù),還是通過函數(shù)聲明指向函數(shù)的,反正你的this就是指向?qū)ο骵xample。
? ? ? ? 好了,結(jié)合上面的再改一改例子:
//全局環(huán)境 var a = 10; function runAway(){ return this.a; } function worker(fn){ fn(); } var example = { a : 20, b : runAway } worker(example.b);
? ? ? ? 可能你會說,通過example.b這樣的的方式,我不管你有沒有跳出來的runAway,this肯定是指向example啦,那就要重溫一下我的結(jié)論了,我說的是通過對象訪問屬性的方式執(zhí)行函數(shù),你執(zhí)行了嗎,你有一對方括號嗎?可能你會說,他們傳入去worker函數(shù),里面就會加一對方括號執(zhí)行啊,那就錯了。
? ? ? ? 通過這種方式的執(zhí)行函數(shù),其實(shí)已經(jīng)變味了,這種情況和上面的例子:var c = example.b,然后c( )執(zhí)行函數(shù)式一樣的,你只不過通過example.b將這個函數(shù)地址傳入了worker函數(shù),然后執(zhí)行而已。
? ? ? ? 所以上面這個例子,就是結(jié)論中的其他情況咯,嚴(yán)格模式this指向undefined(當(dāng)然這個例子會報(bào)錯,因?yàn)閡ndefined沒有a屬性),非嚴(yán)格模式指向全局對象(當(dāng)然這個例子會打印undefined,因?yàn)槿謱ο鬀]有b屬性)。
? ? ? ? 好了,最后再舉一下其他例子:
//全局環(huán)境 var a = 10; var example = { a : 20, b : function(){ return this.a; } } //例子一 console.log(example.b()); //打印結(jié)果為20 //例子二 console.log((example.b)()); //打印結(jié)果為20 //例子三 console.log((false || example.b)()); //打印結(jié)果為10
? ? ? ? 好了,在例子一中,很清楚明白就是常規(guī)的this指向了example。
? ? ? ? 例子二中,你加了一個括號也沒用啊,我沒有將它的函數(shù)地址賦值其他什么變量啊,所以和例子一也是一樣的。
? ? ? ? 至于例子三,我們可以這樣理解,你在括號里面進(jìn)行了一些其他運(yùn)算,所以通過example.b這個方式只是拿了函數(shù)地址出來運(yùn)算,所以在例子三中,括號的結(jié)果是example.b這個結(jié)果,所以是拿到了一個函數(shù)的地址,最后調(diào)用的時(shí)候還是多帶帶調(diào)用啊,就類似前面例子的worker函數(shù)那樣啊。
? ? ? ? 網(wǎng)上還有很多像例子三那樣的古靈精怪的例子,其實(shí)很簡單,你運(yùn)算過了,最后出來的東西再加方括號調(diào)用,就是多帶帶調(diào)用了。
? ? ? ? 最后,好像忘了個很常用的構(gòu)造函數(shù)的this指向:
//先來個構(gòu)造函數(shù)Mankind function Mankind(name){ this.name = name; } //實(shí)例化對象Dad var Dad = new Mankind("BaBa"); console.log(Dad.name); //打印結(jié)果為BaBa
? ? ? ? 很明白了,通過構(gòu)造函數(shù)實(shí)例化對象,構(gòu)造函數(shù)里面的this就是指向這個實(shí)例化對象了。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84529.html
摘要:閉包閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)當(dāng)某個函數(shù)被調(diào)用時(shí),會創(chuàng)建一個執(zhí)行環(huán)境及相應(yīng)的作用域鏈。要注意通過第句聲明的這個方法屬于構(gòu)造函數(shù)生成的對象,而不屬于構(gòu)造函數(shù)的變量對象,也就是說,并不存在于作用域鏈中。 看到評論里有仁兄建議我試試箭頭函數(shù),真是受寵若驚,本來寫這篇文章也只是想記錄寫要點(diǎn)給自己日后看的。今天早上看到一篇總結(jié)javascript中this的文章JavaScr...
摘要:其實(shí)它們都很簡單,但是在處理一些與相關(guān)的函數(shù)的時(shí)候,用來改變函數(shù)中的指向,卻是必不可少的工具,所以必須掌握好它們的用法。 關(guān)于javascript中的bind、call、apply等函數(shù)的用法 我GitHub上的菜鳥倉庫地址: 點(diǎn)擊跳轉(zhuǎn)查看其他相關(guān)文章 文章在我的博客上的地址: 點(diǎn)擊跳轉(zhuǎn) ? ? ? ? 前面的文章已經(jīng)說到this的指向了,那么這篇文章就要說一說和this相關(guān)的三個...
摘要:函數(shù)的調(diào)用有五種模式方法調(diào)用模式,函數(shù)調(diào)用模式,構(gòu)造器調(diào)用模式,調(diào)用模式以及回調(diào)模式,下面分別對這幾種模式進(jìn)行說明。構(gòu)造器調(diào)用模式構(gòu)造函數(shù)的調(diào)用方式被稱為構(gòu)造器調(diào)用模式,這是模擬類繼承式語言的一種調(diào)用方式。 函數(shù)的調(diào)用有五種模式:方法調(diào)用模式,函數(shù)調(diào)用模式,構(gòu)造器調(diào)用模式,apply/call調(diào)用模式以及回調(diào)模式,下面分別對這幾種模式進(jìn)行說明。 1.函數(shù)調(diào)用與方法調(diào)用模式: 1.1 聲...
摘要:關(guān)于提供了一種優(yōu)雅的方式來隱式傳遞一個對象引用,因此可以將設(shè)計(jì)得更加簡潔并且易于復(fù)用。對于的誤解新手會誤認(rèn)為指向函數(shù)本身。這時(shí)候,可以使用的方法強(qiáng)制使指向函數(shù)對象。的綁定和函數(shù)聲明的位置沒有任何關(guān)系,只取決于函數(shù)的調(diào)用方式。 關(guān)于this this 提供了一種優(yōu)雅的方式來隱式傳遞一個對象引用,因此可以將API設(shè)計(jì)得更加簡潔并且易于復(fù)用。 /* *this 隱式傳遞...
摘要:當(dāng)中的是一個用于指向當(dāng)前上下文對象的關(guān)鍵字。創(chuàng)建實(shí)例時(shí)的構(gòu)造函數(shù)中的,永遠(yuǎn)指向那個實(shí)例后對象,不是外部環(huán)境使用來調(diào)用函數(shù)時(shí),先改變其上下文環(huán)境,在對其構(gòu)造函數(shù)進(jìn)行調(diào)用。 javascript 當(dāng)中的 this是一個用于指向當(dāng)前上下文對象的關(guān)鍵字。在面向?qū)ο缶幊碳叭粘i_發(fā)當(dāng)中我們經(jīng)常與其打交道,初學(xué)javscript的朋友非常容易誤入歧途從而理解錯誤。 上下文對象概念 在我的深入貫徹閉包...
閱讀 964·2021-11-24 10:42
閱讀 3475·2021-11-19 11:34
閱讀 2605·2021-09-29 09:35
閱讀 2525·2021-09-09 09:33
閱讀 642·2021-07-26 23:38
閱讀 2515·2019-08-30 10:48
閱讀 1385·2019-08-28 18:07
閱讀 422·2019-08-26 13:44