JavaScript真正的this指向原理

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

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

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

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

在JavaScript語言中，this的設計跟內(nèi)存的數(shù)據(jù)結構有關?；緮?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ù)運行后，其函數(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云服務器 this的指向 javascript的this 改變this指向 javaScript中的this

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

轉載請注明本文地址：http://systransis.cn/yun/109017.html

深入理解 JavaScript 中的 class

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

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

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

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

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

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

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

Dogee 2019-08-23 14:50 評論0 收藏0
JavasScript重難點知識

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

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