很多編程語言提供了const
關鍵詞聲明一個常量,在ES6中也是提供了const
,但是在前端的const
與其他編程語言不同,其並不意味着聲明的變量就是一個常量。使用const b = {}
聲明瞭一個常量b,但是通過使用b.a = 1
去修改對象b卻並沒有報錯,我們修改了一個原本以爲是常量實際上是變量的對象。
爲什麼會這樣?
實際上,const
定義的變量保存的是指向實際數據的指針,對於基本數據類型String、Boolean、Number、undefined、null、Symbol
而言,
其值保存在棧內存中的簡單數據段,按值訪問,就是等同於常量。但是相對於引用數據類型而言,const
只能保證指向保存在堆內存中的對象的指針保持不變,換句話說const
能夠保證變量始終指向同一個對象,至於對象的修改無能爲力。
所以,在前端中到底如何實現一個常量!
Object.freeze
Object.freeze
可以凍結對象,不能新增和刪除屬性,同時對象已有屬性都是不可枚舉、不可配置、不可寫。需要注意的是使用該方法只能讓對象淺凍結,其內部屬性爲對象時
依然能夠被篡改,要想實現完全凍結,那麼就需要進行如下操作。
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
該方法可以將對象變爲不可擴展即對象即不能添加新的屬性,但是對象的原有屬性依然可以被刪除或修改,同時如果屬性的值爲對象,儘管設置了
不能被添加屬性,但是其屬性值爲對象的屬性依舊可以添加屬性。
舉個例子:
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
相比,該方法同樣能夠將對象變爲不能添加新屬性,並且該方法禁止刪除對象的屬性。同樣如果屬性的值爲對象,
屬性值依舊可以添加新屬性或刪除屬性。
舉個例子
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中大放異彩,使用其也能夠將將對象完整凍結。在寫代碼之前我們
先了解下writable、Configurable
需要知道都內容,這纔是此次凍結的關鍵。
writable
對象屬性的值是否能夠被重寫,爲true表示允許,爲false即被禁止,默認爲false。如果屬性的值爲對象,
儘管設置了不能被重寫,其屬性爲對象的值依舊能夠被重寫。
舉個例子:
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屬性的值被重寫了
console.log(obj.a);
//輸出依然爲2,即b屬性的值沒有被重寫
console.log(obj.b);
//輸出依然爲{d:4},如果屬性的值爲對象,儘管設置了不能被重寫,其屬性爲對象的值依舊能夠被重寫。
console.log(obj.c);
Configurable
configurable
特性表示對象的屬性是否可以被刪除,以及除writable
特性外的其他特性是否可以被修改。爲true表示允許被修改
false表示禁止修改,默認爲false,如果屬性的值爲對象,儘管設置了屬性不能被修改,其屬性爲對象的屬性依舊能夠被修改。
舉個例子
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:{}},如果屬性的值爲對象,儘管設置了屬性不能被修改,其屬性爲對象的屬性依舊能夠被修改。
console.log(obj);
上面這三個方法單獨拿出來並不能夠完美的將對象變爲一個常量,但是我們組合一下就可以生成一個常量。
function deepConst(data){
if (!data || typeof data !== 'object') {
return;
}
//Object.preventExtensions(data);也可以實現
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
在目標對象之前進行了一層攔截,外界對對象的訪問和修改都需要通過這層攔截,所以我們可以操控攔截來控制對對象對訪問和修改。Proxy
支持的攔截操作衆多,下面只列舉與文章相關的操作,如果想更深入瞭解Proxy
,請看這篇文章。
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, []);
}