成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

不為人知的javascript的內(nèi)部屬性

plokmju88 / 2278人閱讀

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

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

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

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

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

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

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

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

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

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

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

我們換種寫法：

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

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

此屬性，我們不可去訪問與修改它，目前只能在控制臺(tái)中點(diǎn)擊查看.

[[FunctionLocation]]

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

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

對(duì)于這個(gè)屬性，我們以后可以大大減少console的使用啦

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

這個(gè)內(nèi)部屬性，表示對(duì)象的原型鏈，類似與[[Scopes]]也是一個(gè)數(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

此時(shí)原型鏈關(guān)系是這樣的:

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92500.html

相關(guān)文章

  • 關(guān)于JavaScript對(duì)象，你所不知道的事（一）- 先談對(duì)象

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

    mykurisu 評(píng)論0 收藏0

  • JavaScript面向?qū)ο驩OM 2（JavaScript 創(chuàng)建對(duì)象的工廠模式和構(gòu)造函數(shù)模式）

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

    you_De 評(píng)論0 收藏0

  • JavaScript面向?qū)ο驩OM 2（JavaScript 創(chuàng)建對(duì)象的工廠模式和構(gòu)造函數(shù)模式）

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

    liuchengxu 評(píng)論0 收藏0

  • Webkit 渲染基礎(chǔ)與硬件加速

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

    ivan_qhz 評(píng)論0 收藏0

  • Javascript零碎之各種寬高屬性及應(yīng)用

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

    DevYK 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<