ES6 -- 常數(Constants)
常數用途: 防止值被修改(也就是writable: false)
ES6以前沒有常數, ES5時只是以"全大寫"命名習慣表示常數。
ES6以const定義一個常數, 其特性為:
1. 不可重複宣告相同的常數名稱
--> e.g. const PI = 3.14; 不可再宣告另一個 const PI = 1;
2. 不可再次為已宣告的常數指定值
--> e.g. const PI = 3.14; 不可再宣告另一個 const PI = 1;(值一開始設定是3.14就永遠是3.14)
3. 不可在宣告前使用常數
--> e.g. PI(); 會是undefined, 因為還未宣告, 宣告的寫法是: const PI = 3.14;
回憶一下ES5時, 如果要做到像ES6 const那樣值不被修改的效果, 就要使用Object.defineProperty: (之前有介紹過此語法)
e.g.
Object.defineProperty(typeof global === "object" ? global : window, "PI1", {
// typeof global === "object"用來判斷是在node.js環境還是在window環境, 因為在node.js中, 用global相等於瀏覽器中的window
value: 3.1415926,
enumerable: true,
writable: false, // 重點在這, false代表不能修改值
configurable: false
});
console.log(PI1); // 3.1415926
PI1 = 100; // 在這裡嘗試修改值為100
console.log(PI1); // 3.1415926 --> 修改失敗, 值仍保持3.1415926
而如果用ES6 const做法, 是:
e.g.
const PI2 = 3.1415926;
console.log(PI2); // 3.1415926
PI2 = 100; // 在這裡嘗試修改值為100
console.log(PI2); // 3.1415926 --> 修改失敗, 值仍保持3.1415926
注意:
如果今天值是個"物件", 則在ES5和ES6中, "物件"中的屬性值卻可被修改(因我們並未改變物件變數本身(也就是參考不變), 只是修改其物件底下的屬性值):
在ES5中:
e.g.
Object.defineProperty(typeof global === "object" ? global : window, "DATA1", {
value: {
content: "abc" // 原本物件屬性中的屬性值是"abc"
},
enumerable: true,
writable: false,
configurable: false
});
DATA1.content = "xyz"; // 在這裡嘗試修改屬性值為"xyz"
console.log(DATA1.content); // "xyz" --> 成功修改。當修改的不是物件屬性("參考"本身), 而是物件屬性中的屬性值時, 是可被修改的。
在ES6中:
e.g.
const DATA2 = {
content: "abc" // 原本物件屬性中的屬性值是"abc"
};
DATA2.content = "xyz"; // 在這裡嘗試修改屬性值為"xyz"
console.log(DATA2.content); // "xyz" --> 成功修改。當修改的不是物件屬性("參考"本身), 而是物件屬性中的屬性值時, 是可被修改的。
ES6以前沒有常數, ES5時只是以"全大寫"命名習慣表示常數。
ES6以const定義一個常數, 其特性為:
1. 不可重複宣告相同的常數名稱
--> e.g. const PI = 3.14; 不可再宣告另一個 const PI = 1;
2. 不可再次為已宣告的常數指定值
--> e.g. const PI = 3.14; 不可再宣告另一個 const PI = 1;(值一開始設定是3.14就永遠是3.14)
3. 不可在宣告前使用常數
--> e.g. PI(); 會是undefined, 因為還未宣告, 宣告的寫法是: const PI = 3.14;
回憶一下ES5時, 如果要做到像ES6 const那樣值不被修改的效果, 就要使用Object.defineProperty: (之前有介紹過此語法)
e.g.
Object.defineProperty(typeof global === "object" ? global : window, "PI1", {
// typeof global === "object"用來判斷是在node.js環境還是在window環境, 因為在node.js中, 用global相等於瀏覽器中的window
value: 3.1415926,
enumerable: true,
writable: false, // 重點在這, false代表不能修改值
configurable: false
});
console.log(PI1); // 3.1415926
PI1 = 100; // 在這裡嘗試修改值為100
console.log(PI1); // 3.1415926 --> 修改失敗, 值仍保持3.1415926
而如果用ES6 const做法, 是:
e.g.
const PI2 = 3.1415926;
console.log(PI2); // 3.1415926
PI2 = 100; // 在這裡嘗試修改值為100
console.log(PI2); // 3.1415926 --> 修改失敗, 值仍保持3.1415926
注意:
如果今天值是個"物件", 則在ES5和ES6中, "物件"中的屬性值卻可被修改(因我們並未改變物件變數本身(也就是參考不變), 只是修改其物件底下的屬性值):
在ES5中:
e.g.
Object.defineProperty(typeof global === "object" ? global : window, "DATA1", {
value: {
content: "abc" // 原本物件屬性中的屬性值是"abc"
},
enumerable: true,
writable: false,
configurable: false
});
DATA1.content = "xyz"; // 在這裡嘗試修改屬性值為"xyz"
console.log(DATA1.content); // "xyz" --> 成功修改。當修改的不是物件屬性("參考"本身), 而是物件屬性中的屬性值時, 是可被修改的。
在ES6中:
e.g.
const DATA2 = {
content: "abc" // 原本物件屬性中的屬性值是"abc"
};
DATA2.content = "xyz"; // 在這裡嘗試修改屬性值為"xyz"
console.log(DATA2.content); // "xyz" --> 成功修改。當修改的不是物件屬性("參考"本身), 而是物件屬性中的屬性值時, 是可被修改的。
留言
張貼留言