JavaScript真正的this指向原理

VioletJack 發(fā)布于2019-08-26 13:33 / 3152人閱讀

摘要：為了能夠在函數(shù)體內(nèi)部獲得當(dāng)前的運(yùn)行環(huán)境。然后獲取函數(shù)的地址內(nèi)存地址，函數(shù)運(yùn)行后，其函數(shù)內(nèi)部上下文指向的就是原始對象環(huán)境，即指向返回的屬性值。一旦，變量就直接指向函數(shù)本身，所以就變成在全局環(huán)境執(zhí)行。

JavaScript函數(shù)是一個多帶帶的值，它可以在不同的環(huán)境（上下文）中執(zhí)行，同時JavaScript 允許在函數(shù)體內(nèi)部，引用當(dāng)前環(huán)境的其他變量。

為了能夠在函數(shù)體內(nèi)部獲得當(dāng)前的運(yùn)行環(huán)境（context）。所以，this就出現(xiàn)了，它的設(shè)計目的就是在函數(shù)體內(nèi)部，指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。

在JavaScript語言中，this的設(shè)計跟內(nèi)存的數(shù)據(jù)結(jié)構(gòu)有關(guān)?；緮?shù)據(jù)類型是按值訪問的，引用類型存儲在內(nèi)存中。

比如：

 var outer={
   fn:function(){console.log(this.x)},
   x:2
 }
 var x=1;
 var runFn=outer.fn;
 
 outer.fn() //2
 runFn() //1

上面的代碼中，將一個對象賦值給變量outer，JavaScript引擎會先在內(nèi)存中生成對象{fu:function(){},x:2}，然后把對象的內(nèi)存地址賦值給變量outer。

也就是說，變量outer 保存的是一個地址。后面如果要讀取outer.fn，引擎先從outer拿到內(nèi)存地址，然后再從該地址讀出原始的對象。

然后原始對象根據(jù)fn屬性值，然而fn的屬性值是一個函數(shù)，這時JavaScript引擎將函數(shù)多帶帶保存在內(nèi)存中，然后將函數(shù)的內(nèi)存地址賦值給fn屬性的 value 屬性。

然后獲取函數(shù)的地址內(nèi)存地址，outer.fn()函數(shù)運(yùn)行后，其函數(shù)內(nèi)部上下文（context）指向的就是原始對象環(huán)境，即his指向outer,返回outer的x屬性值。

outer.fn()是通過outer找到fn，所以就是在outer環(huán)境執(zhí)行。一旦var runFn = outer.fn，變量runFn就直接指向函數(shù)本身，所以runFn()就變成在全局環(huán)境執(zhí)行。

GPU云服務(wù)器云服務(wù)器 this的指向 javascript的this 改變this指向 javaScript中的this

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109017.html

相關(guān)文章

深入理解 JavaScript 中的 class

摘要：在規(guī)范中，引入了的概念。使用中的聲明一個類，是非常簡單的事。中面向?qū)ο髮?shí)例化的背后原理，實(shí)際上就是原型對象。與區(qū)別理解上述原理后，還需要注意與屬性的區(qū)別。實(shí)際上，在中，類繼承的本質(zhì)依舊是原型對象。在 ES6 規(guī)范中，引入了 class 的概念。使得 JS 開發(fā)者終于告別了，直接使用原型對象模仿面向?qū)ο笾械念惡皖惱^承時代。但是JS 中并沒有一個真正的 class 原始類型， clas...

Vicky 2019-08-20 14:16 評論0 收藏0
前端面試之Js篇

摘要：作為構(gòu)造函數(shù)使用，綁定到新創(chuàng)建的對象。內(nèi)部實(shí)現(xiàn)類和類的繼承構(gòu)造函數(shù)構(gòu)造函數(shù)調(diào)用父類構(gòu)造函數(shù)參考請盡可能詳盡的解釋的工作原理的原理簡單來說通過對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用來操作而更新頁面。 1 . 請解釋事件代理 (event delegation) 當(dāng)需要對很多元素添加事件的時，可以通過將事件添加到它們的父節(jié)點(diǎn)通過委托來觸發(fā)處理函數(shù)。其中利用到了瀏覽器的事件冒泡機(jī)...

anyway 2019-08-20 17:03 評論0 收藏0
關(guān)于JavaScript中this的理解

摘要：想想也是難以置信，這應(yīng)該全歸功于對框架的依賴，促使助長了自己對學(xué)習(xí)的懈怠。真正的成了離職就失業(yè)的尷尬境地。我們接下來來了解下中的的使用和作用。以前對中的理解很簡單粗暴誰調(diào)用就指向誰。如果例題中有不對的地方希望予以指教留言評論前言使用JavaScript有很長一段時間了，但是以前過多都是使用，從不去及理解其中原理，單單只是去生拼硬湊。這樣的開發(fā)居然做了2年。匪夷所思居然項目中Java...

lindroid 2019-08-26 10:48 評論0 收藏0
前端面試筆記 - js相關(guān)

摘要：將單個事件綁定在父對象上，利用冒泡機(jī)制監(jiān)聽來自子元素的事件。事件目標(biāo)當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。函數(shù)對象當(dāng)使用去調(diào)用構(gòu)造函數(shù)時，相當(dāng)于執(zhí)行了原型對象上都有個預(yù)定義的屬性，用來引用它的函數(shù)對象。請解釋事件代理 (event delegation)。將單個事件綁定在父對象上，利用冒泡機(jī)制,監(jiān)聽來自子元素的事件。優(yōu)點(diǎn)：解決子元素增加刪除時候的事件處理，防止內(nèi)存...

Dogee 2019-08-23 14:50 評論0 收藏0
JavasScript重難點(diǎn)知識

摘要：忍者級別的函數(shù)操作對于什么是匿名函數(shù)，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數(shù)是一個很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個供以后使用的函數(shù)。 JS 中的遞歸遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0