不為人知的javascript的內部屬性

plokmju88 發(fā)布于2019-08-22 13:50 / 2266人閱讀

摘要：詞法階段會定義函數(shù)所用到的變量，加入到內部屬性當中，它是一個數(shù)組，最后一位永遠都是全局對象，向前依次是祖先父級。這個等同于的非標準但許多瀏覽器實現(xiàn)的屬性。

內部屬性在我們了解對象原型及環(huán)境變量時都有遇到過，可是畢竟看不到摸不著，很難更加深入的了解它的工作流程和作用,最近在chrome當中查看對象結構時，看到了釋放出來的一些內部屬性，這些以前大概都是概念，那么既然能看到，就讓我們來探索一下吧~

[[Scopes]]

此屬性儲存在函數(shù)對象中，我記得從chrome 62開始我就發(fā)現(xiàn)這個屬性了，具體哪個版本大家可以google,現(xiàn)在我們把它給打印出來看一下.

這是一個不訪問外部變量的函數(shù)，所以Scopes中只儲存了Global全局對象。

還記得作用域鏈嗎(如果不記得，請點擊這里看前半部分)？
從前往后分別是 [函數(shù)自己的變量對象，.., .., Global] 類似于這樣依次向后(上)查找這個執(zhí)行環(huán)境所使用到的變量對象。

在上面的文章說過，javascript在開始執(zhí)行時，會經(jīng)過兩個階段，預編譯->代碼執(zhí)行，在v8中代碼執(zhí)行階段運行的是機器碼，CPU可以直接接收，
可以說，在javascript代碼執(zhí)行前都會經(jīng)過復雜的代碼分割，生成抽象語法樹(AST)，編譯解析與優(yōu)化等操作，[[Scopes]]正是這其中的產(chǎn)物。下面說
下它形成的流程。

詞法階段會定義函數(shù)所用到的變量，加入到[[Scopes]]內部屬性當中，它是一個數(shù)組，最后一位永遠都是Global全局對象，向前依次是祖先->父級。注意，這時只是在第一個階段，js引擎并沒有執(zhí)行你的操作。(總之所有的臟活累活都要在第一個階段完成，以保證js引擎執(zhí)行的最高效率)

執(zhí)行流進入，讀取這個執(zhí)行環(huán)境(函數(shù))的[[Scopes]]屬性，并把自身的變量對象加入到前端(unshift)，形成作用域鏈，這樣從頭到尾的變量對象，構成了偉大的作用域。

需要注意的是，并不是所有的父級作用域的變量都進行存儲，而只會存儲當前函數(shù)所使用到的變量。所以我們進行這樣的操作是查看不到父級變量的.

  var a = 1;
  function fun(){
      var b = 1;
      const p = ()=>{}
      console.dir(p)
  }
  fun();

函數(shù)p當中并沒用使用到父級函數(shù)中的變量b，所以[[Scopes]]只有Global對象(注意，因為Global對象永遠存在，并且是引用，所以不會出現(xiàn)這種情況)，
我認為這也是一種優(yōu)化手段，可以極大減少內存的使用。

我們換種寫法：

var a = 1;
  function fun(){
      var b = 1;
      const p = ()=>{
        var c = 1;
        const f = ()=>{ console.log(b,c) }
        console.dir(f)
      }
      p();
  }
  fun();

我們引用了父級作用域中的變量，并打印出來，在編譯階段，編譯器把他們加入到了[[Scopes]]中。

此屬性，我們不可去訪問與修改它，目前只能在控制臺中點擊查看.

[[FunctionLocation]]

這個很容易理解，類似于debugger功能，可以很容易的查找到此函數(shù)的代碼位置，比如我們以React為例，查看 React.Component函數(shù)位置.

可以看到，key右側的可點擊部分，表示函數(shù)在react-dom.min.js第34行，我們點進去查看，暈了，代碼被混淆了...

對于這個屬性，我們以后可以大大減少console的使用啦

[[Prototype]]

遵循ECMAScript標準，someObject.[[Prototype]] 符號是用于指向 someObject的原型。從 ECMAScript 6 開始，[[Prototype]]
可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問器來訪問。這個等同于 JavaScript 的非標準但許多瀏覽器實現(xiàn)的屬性
__proto__。我們經(jīng)常使用Object.prototype.toString來判斷對象類型，toString就是把當前的這個屬性轉換成字符串返回出去了.

這個內部屬性，表示對象的原型鏈，類似與[[Scopes]]也是一個數(shù)組格式.

   var b = {a:1};
   function o(a){
     this.b = a;
   }
   o.prototype = { c:3; }
   b.__proto__ = new o(2);
   console.log(b.a,b.b,b.c); //1 2 3

此時原型鏈關系是這樣的:

貌似還有很多內部屬性，一時想不起來(如果發(fā)現(xiàn)，以后會更新)，大家有知道的，可以發(fā)表評論。

云服務器 GPU云服務器 html 鮮為人知的內部屬性 js函數(shù)內部屬性 cdn的內部業(yè)務

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92500.html

關于JavaScript對象，你所不知道的事（一）- 先談對象

摘要：對象與屬性讓我們保持耐心，再梳理一下對象與屬性的關系對象是屬性的集合，當對象的屬性是函數(shù)時，我們將其稱之為方法。這篇博文的主要目的是為了填坑，很久之前我發(fā)表了一篇名為關于JavaScript對象中的一切（一） — 對象屬性的文章，想要談一談JavaScript對象，可那時只是貼了一張關于這個主題的思維導圖，今天我會針對這一主題進行展開，將JavaScript對象一些平常不太常用的知識...

mykurisu 2019-08-21 17:49 評論0 收藏0
JavaScript面向對象OOM 2（JavaScript 創(chuàng)建對象的工廠模式和構造函數(shù)模式）

摘要：都是構造函數(shù)模式創(chuàng)建的原生構造函數(shù)。使用構造函數(shù)創(chuàng)建對象經(jīng)歷了以下四個過程創(chuàng)建一個新對象構造函數(shù)的作用域交給新對象。 ??在創(chuàng)建對象的時候，使用對象字面量和 new Object() 構造函數(shù)的方式創(chuàng)建一個對象是最簡單最方便的方式。但是凡是處于初級階段的事物都會不可避免的存在一個問題，沒有普適性，意思就是說我要為世界上（程序中）的所有使用到的對象都使用一遍 var xxx = {} ，...

you_De 2019-08-02 11:55 評論0 收藏0
JavaScript面向對象OOM 2（JavaScript 創(chuàng)建對象的工廠模式和構造函數(shù)模式）

摘要：都是構造函數(shù)模式創(chuàng)建的原生構造函數(shù)。使用構造函數(shù)創(chuàng)建對象經(jīng)歷了以下四個過程創(chuàng)建一個新對象構造函數(shù)的作用域交給新對象。 ??在創(chuàng)建對象的時候，使用對象字面量和 new Object() 構造函數(shù)的方式創(chuàng)建一個對象是最簡單最方便的方式。但是凡是處于初級階段的事物都會不可避免的存在一個問題，沒有普適性，意思就是說我要為世界上（程序中）的所有使用到的對象都使用一遍 var xxx = {} ，...

liuchengxu 2019-08-23 12:47 評論0 收藏0
Webkit 渲染基礎與硬件加速

摘要：網(wǎng)頁的渲染方式主要有兩種軟件渲染和硬件加速渲染。而使用合成化的渲染技術，以使用軟件繪圖的合成化渲染為例，對于使用繪制的層，其結果保存在內存中，之后傳輸?shù)街羞M行合成。 Webkit 渲染基礎與硬件加速當瀏覽器加載一個 html 文件并對它進行解析完畢后，內核就會生成一個極為重要的數(shù)據(jù)結構即 DOM 樹，樹上每一個節(jié)點都對應著網(wǎng)頁里面的某一個元素，并且開發(fā)人員也可以通過 JavaScri...

ivan_qhz 2019-08-22 15:14 評論0 收藏0
Javascript零碎之各種寬高屬性及應用

摘要：一掛在上的上最常用的只有其中，永遠都是窗口的大小，跟隨窗口變化而變化。這個是距該元素最近的不為的祖先元素，如果沒有則指向元素。在Javascript的開發(fā)過程中，我們總會看到類似如下的邊界條件判斷(懶加載)： const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.b...

DevYK 2019-08-23 18:21 評論0 收藏0