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

資訊專欄INFORMATION COLUMN

如何在 ES5 環(huán)境下實現(xiàn)一個const ？

Muninn / 903人閱讀 


作者：陳大魚頭


github： KRISACHAN
前言

剛剛看了掘金上一篇文章《作為技術(shù)面試官，為什么把你pass了》，里面第一題就是用es5實現(xiàn)const，據(jù)作者反饋 這一題所有的面試者都沒有回答出來，感覺挺可惜的，其實這是一道比較簡單的題目，但是由于涉及到了一些Object對象屬性描述符的知識，這些描述符往往用到的場景不多，所以不容易記住。

屬性描述符： 對象里目前的屬性描述符有兩種：

數(shù)據(jù)描述符：具有值的屬性

存取描述符：由getter與setter函數(shù)對描述的屬性

描述符功能：

數(shù)據(jù)描述符與存取描述符皆可修改:

configurable：當(dāng)前對象元素的屬性描述符是否可改，是否可刪除

enumerable：當(dāng)前對象元素是否可枚舉

唯有數(shù)據(jù)描述符可以修改：

value: 當(dāng)前對象元素的值

writable：當(dāng)前對象元素的值是否可修改

唯有存取描述符可以修改：

get：讀取元素屬性值時的操作

set：修改元素屬性值時的操作

描述符可同時具有的鍵值：
configurable enumerable value writable get set
數(shù)據(jù)描述符 Yes Yes Yes Yes No No
存取描述符 Yes Yes No No Yes Yes
const 實現(xiàn)原理 
由于ES5環(huán)境沒有block的概念，所以是無法百分百實現(xiàn)const，只能是掛載到某個對象下，要么是全局的window，要么就是自定義一個object來當(dāng)容器


      var __const = function __const (data, value) {
        window.data = value // 把要定義的data掛載到window下，并賦值value
        Object.defineProperty(window, data, { // 利用Object.defineProperty的能力劫持當(dāng)前對象，并修改其屬性描述符
          enumerable: false,
          configurable: false,
          get: function () {
            return value
          },
          set: function (data) {
            if (data !== value) { // 當(dāng)要對當(dāng)前屬性進行賦值時，則拋出錯誤！
              throw new TypeError("Assignment to constant variable.")
            } else {
              return value
            }
          }
        })
      }
      __const("a", 10)
      console.log(a)
      delete a
      console.log(a)
      for (let item in window) { // 因為const定義的屬性在global下也是不存在的，所以用到了enumerable: false來模擬這一功能
        if (item === "a") { // 因為不可枚舉，所以不執(zhí)行
          console.log(window[item])
        }
      }
      a = 20 // 報錯
題外話

Vue目前雙向綁定的核心實現(xiàn)思路就是利用Object.defineProperty對get跟set進行劫持，監(jiān)聽用戶對屬性進行調(diào)用以及賦值時的具體情況，從而實現(xiàn)的雙向綁定~~



如果你、喜歡探討技術(shù)，或者對本文有任何的意見或建議，你可以掃描下方二維碼，關(guān)注微信公眾號“魚頭的Web海洋”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。

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

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

相關(guān)文章

  • ES5和ES6作用域詳解

    摘要：允許在塊級作用域內(nèi)聲明函數(shù)。上面代碼中，存在全局變量，但是塊級作用域內(nèi)又聲明了一個局部變量，導(dǎo)致后者綁定這個塊級作用域，所以在聲明變量前，對賦值會報錯。 ES5的作用域 變量起作用的范圍，js中能創(chuàng)建作用域的只能是函數(shù) { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); //...

    Dr_Noooo 評論0 收藏0

  • 面試官：自己搭建過vue開發(fā)環(huán)境嗎？

    摘要：在搭建過程中，還是會踩很多坑的。如果還不熟悉的話，建議自己搭建一次。開篇 原文地址：www.ccode.live/lentoo/list… 前段時間，看到群里一些小伙伴面試的時候被面試官問到這類題目。平時大家開發(fā)vue項目的時候，相信大部分人都是使用 vue-cli腳手架生成的項目架構(gòu)，然后 npm run install 安裝依賴，npm run serve啟動項目然后就開始寫業(yè)務(wù)代碼...

    HelKyle 評論0 收藏0

  • ES6核心特性

    摘要：報錯不報此外還有個好處就是簡化回調(diào)函數(shù)正常函數(shù)寫法箭頭函數(shù)寫法改變指向長期以來，語言的對象一直是一個令人頭痛的問題，在對象方法中使用，必須非常小心。 前言 ES6 雖提供了許多新特性，但我們實際工作中用到頻率較高并不多，根據(jù)二八法則，我們應(yīng)該用百分之八十的精力和時間，好好專研這百分之二十核心特性，將會收到事半功倍的奇效！寫文章不容易，請大家多多支持與關(guān)注！本文首發(fā)地址GitHub博客（...

    loostudy 評論0 收藏0

  • ES6核心特性

    摘要：報錯不報此外還有個好處就是簡化回調(diào)函數(shù)正常函數(shù)寫法箭頭函數(shù)寫法改變指向長期以來，語言的對象一直是一個令人頭痛的問題，在對象方法中使用，必須非常小心。 前言 ES6 雖提供了許多新特性，但我們實際工作中用到頻率較高并不多，根據(jù)二八法則，我們應(yīng)該用百分之八十的精力和時間，好好專研這百分之二十核心特性，將會收到事半功倍的奇效！寫文章不容易，請大家多多支持與關(guān)注！本文首發(fā)地址GitHub博客（...

    _DangJin 評論0 收藏0

  • ES6學(xué)習(xí) 第一章 let 和 const 命令

    摘要：外層作用域不報錯正常輸出塊級作用域與函數(shù)聲明規(guī)定，函數(shù)只能在頂層作用域和函數(shù)作用域之中聲明，不能在塊級作用域聲明。規(guī)定，塊級作用域之中，函數(shù)聲明語句的行為類似于，在塊級作用域之外不可引用。同時，函數(shù)聲明還會提升到所在的塊級作用域的頭部。 前言：最近開始看阮一峰老師的《ECMAScript 6 入門》(以下簡稱原...

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<