前端如何定義一個(gè)常量

widuu 發(fā)布于2019-08-23 15:55 / 3261人閱讀

摘要：很多編程語(yǔ)言提供了關(guān)鍵詞聲明一個(gè)常量，在中也是提供了，但是在前端的與其他編程語(yǔ)言不同，其并不意味著聲明的變量就是一個(gè)常量。所以，在前端中到底如何實(shí)現(xiàn)一個(gè)常量可以凍結(jié)對(duì)象，不能新增和刪除屬性，同時(shí)對(duì)象已有屬性都是不可枚舉不可配置不可寫(xiě)。

很多編程語(yǔ)言提供了const關(guān)鍵詞聲明一個(gè)常量，在ES6中也是提供了const，但是在前端的const與其他編程語(yǔ)言不同，其并不意味著聲明的變量就是一個(gè)常量。使用const b = {}聲明了一個(gè)常量b，但是通過(guò)使用b.a = 1去修改對(duì)象b卻并沒(méi)有報(bào)錯(cuò)，我們修改了一個(gè)原本以為是常量實(shí)際上是變量的對(duì)象。

為什么會(huì)這樣？

實(shí)際上，const定義的變量保存的是指向?qū)嶋H數(shù)據(jù)的指針，對(duì)于基本數(shù)據(jù)類型String、Boolean、Number、undefined、null、Symbol而言，
其值保存在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段，按值訪問(wèn)，就是等同于常量。但是相對(duì)于引用數(shù)據(jù)類型而言，const只能保證指向保存在堆內(nèi)存中的對(duì)象的指針保持不變，換句話說(shuō)
const能夠保證變量始終指向同一個(gè)對(duì)象，至于對(duì)象的修改無(wú)能為力。

所以，在前端中到底如何實(shí)現(xiàn)一個(gè)常量!

Object.freeze

Object.freeze可以凍結(jié)對(duì)象，不能新增和刪除屬性，同時(shí)對(duì)象已有屬性都是不可枚舉、不可配置、不可寫(xiě)。需要注意的是使用該方法只能讓對(duì)象淺凍結(jié)，其內(nèi)部屬性為對(duì)象時(shí)
依然能夠被篡改，要想實(shí)現(xiàn)完全凍結(jié)，那么就需要進(jìn)行如下操作。

function deepConst(data){
  Object.freeze(data);
  for(let key in data){
    let prop = data[key];
    if(!data.hasOwnProperty(key) || !(typeof prop === "object") || Object.isFrozen(prop)){
      continue;
    }
    deepConst(prop);
  }
}

Object.defineProperty、Object.preventExtensions、Object.seal Object.preventExtensions

該方法可以將對(duì)象變?yōu)椴豢蓴U(kuò)展即對(duì)象即不能添加新的屬性，但是對(duì)象的原有屬性依然可以被刪除或修改，同時(shí)如果屬性的值為對(duì)象，盡管設(shè)置了
不能被添加屬性，但是其屬性值為對(duì)象的屬性依舊可以添加屬性。

舉個(gè)例子：

let obj = {a:1,b:2,c:{d:3}};
Object.preventExtensions(obj);
obj.d = 1;
obj.a = 2;
delete obj.b;
obj.c.e = 10;
//輸出{a:1,c:{d:3,e:10}
console.log(obj);

Object.seal

與Object.preventExtensions相比，該方法同樣能夠?qū)?duì)象變?yōu)椴荒芴砑有聦傩?，并且該方法禁止刪除對(duì)象的屬性。同樣如果屬性的值為對(duì)象，
屬性值依舊可以添加新屬性或刪除屬性。

舉個(gè)例子

let obj = {a:1,b:2,c:{d:3}};
Object.seal(obj);
obj.e = 10;
delete obj.a;
delete obj.c.d;
obj.c.f = 10;
//輸出{a:1,b:2,c:{f:10}
console.log(obj);

Object.defineProperty

Object.defineProperty(obj, prop, descriptor)在MVVM中大放異彩，使用其也能夠?qū)?duì)象完整凍結(jié)。在寫(xiě)代碼之前我們
先了解下writable、Configurable需要知道都內(nèi)容，這才是此次凍結(jié)的關(guān)鍵。

writable

對(duì)象屬性的值是否能夠被重寫(xiě)，為true表示允許，為false即被禁止，默認(rèn)為false。如果屬性的值為對(duì)象，
盡管設(shè)置了不能被重寫(xiě)，其屬性為對(duì)象的值依舊能夠被重寫(xiě)。

舉個(gè)例子：

let obj = {a:1,b:2,c:{d:3}};
Object.defineProperty(obj,"a",{writable:true});
Object.defineProperty(obj,"b",{writable:false});
Object.defineProperty(obj,"c",{writable:false});
Object.defineProperty(obj,"e",{writable:false});
obj.a = 2;
obj.b = 3;
obj.c.d = 4;
//輸出為2，即a屬性的值被重寫(xiě)了
console.log(obj.a);
//輸出依然為2，即b屬性的值沒(méi)有被重寫(xiě)
console.log(obj.b);
//輸出依然為{d:4}，如果屬性的值為對(duì)象，盡管設(shè)置了不能被重寫(xiě)，其屬性為對(duì)象的值依舊能夠被重寫(xiě)。
console.log(obj.c);

Configurable

configurable特性表示對(duì)象的屬性是否可以被刪除，以及除writable特性外的其他特性是否可以被修改。為true表示允許被修改
false表示禁止修改，默認(rèn)為false，如果屬性的值為對(duì)象，盡管設(shè)置了屬性不能被修改，其屬性為對(duì)象的屬性依舊能夠被修改。
舉個(gè)例子

let obj = {a:1,b:2,c:{d:3}};
Object.defineProperty(obj,"a",{configurable:true});
Object.defineProperty(obj,"b",{configurable:false});
Object.defineProperty(obj,"c",{configurable:false});
delete obj.a;
delete obj.b;
delete obj.c;
//輸出 {b:2,c:{}}，如果屬性的值為對(duì)象，盡管設(shè)置了屬性不能被修改，其屬性為對(duì)象的屬性依舊能夠被修改。
console.log(obj);

上面這三個(gè)方法多帶帶拿出來(lái)并不能夠完美的將對(duì)象變?yōu)橐粋€(gè)常量，但是我們組合一下就可以生成一個(gè)常量。

function deepConst(data){
  if (!data || typeof data !== "object") {
    return;
  }
  //Object.preventExtensions(data);也可以實(shí)現(xiàn)
  Object.seal(data);
  Object.keys(data).forEach(function(key) {
    unWriteConfig(data, key, data[key]);
  });
}
function unWriteConfig(data, key, val) {
  deepConst(val);
  Object.defineProperty(data, key, {
    writable:false,
    configurable:false
  });
}

Proxy

Proxy在目標(biāo)對(duì)象之前進(jìn)行了一層攔截，外界對(duì)對(duì)象的訪問(wèn)和修改都需要通過(guò)這層攔截，所以我們可以操控?cái)r截來(lái)控制對(duì)對(duì)象對(duì)訪問(wèn)和修改。Proxy
支持的攔截操作眾多，下面只列舉與文章相關(guān)的操作，如果想更深入了解Proxy,請(qǐng)看這篇文章。

function createDeepProxy(target) {
  function makeHandler() {
    return {
      set(target, key, value, receiver) {
        return false;
      },
      deleteProperty(target, key) {
        return false;
      }
    }
  }
  
  function proxify(obj, path) {
    for(let key of Object.keys(obj)) {
      if(typeof obj[key] === "object") {
        obj[key] = proxify(obj[key], [...path, key]);
      }
    }
    let p = new Proxy(obj, makeHandler());
    return p;
  }
  return proxify(target, []);
}

GPU云服務(wù)器云服務(wù)器定義常量自定義常量 python定義常量定義array常量

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

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

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

登陸后可評(píng)論

0條評(píng)論

widuu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

MBR60100PT-ASEMI肖特基二極管，MBR60100PT適配變頻器

閱讀 3682·2021-11-24 09:39
【浙政釘】微信-專有釘釘小程序-開(kāi)發(fā)踩坑實(shí)記

閱讀 2637·2021-11-15 11:37
力扣1812，LCP17，2011，1876，520，709，1704，1844，1805題解

閱讀 2365·2021-11-11 16:55
Python自動(dòng)繪制UML圖、函數(shù)調(diào)用圖（Call Graph）

閱讀 5714·2021-10-14 09:43
GitHub 推出 2 款色盲模式主題

閱讀 3786·2021-10-08 10:05
CMIVPS：VPS主機(jī)年付7折月付8折,香港大帶寬/直連線路

閱讀 3089·2021-09-13 10:26
面向?qū)ο?方法

閱讀 2399·2021-09-08 09:35
less學(xué)習(xí)之Bootstrap

閱讀 3589·2019-08-30 15:55

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端如何定義一個(gè)常量

writable

Configurable

相關(guān)文章

在前端如何保護(hù)共享對(duì)象

一只前端小白的JS note

【進(jìn)階1-5期】JavaScript深入之4類常見(jiàn)內(nèi)存泄漏及如何避免

前端知識(shí)點(diǎn)總結(jié)——JS基礎(chǔ)

前端代碼規(guī)范筆記

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

0條評(píng)論

widuu

男|高級(jí)講師

TA的文章

MBR60100PT-ASEMI肖特基二極管，MBR60100PT適配變頻器

【浙政釘】微信-專有釘釘小程序-開(kāi)發(fā)踩坑實(shí)記

力扣1812，LCP17，2011，1876，520，709，1704，1844，1805題解

Python自動(dòng)繪制UML圖、函數(shù)調(diào)用圖（Call Graph）

GitHub 推出 2 款色盲模式主題

CMIVPS：VPS主機(jī)年付7折月付8折,香港大帶寬/直連線路

面向?qū)ο?方法

less學(xué)習(xí)之Bootstrap

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端如何定義一個(gè)常量

writable

Configurable

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！