JS中如何創(chuàng)建私有變量示例詳解
1、使用閉包(Closure) 模擬私有變量
通過使用閉包,可以將私有變量封裝在一個函數(shù)的作用域內(nèi),外部無法直接訪問這些私有變量。閉包可以保證私有變量的封裝性和安全性。
function MyClass() {
// 私有變量
let privateVar = 'I am private';
// 公共方法
this.getPrivateVar = function() {
return privateVar;
}
this.setPrivateVar = function(value) {
privateVar = value;
}
}
const myInstance = new MyClass();
console.log(myInstance.getPrivateVar()); // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar()); // "New Value"
console.log(myInstance.privateVar); // undefined (無法直接訪問私有變量)
privateVar 是通過閉包實現(xiàn)的私有變量,外部代碼無法直接訪問它。
通過 getPrivateVar 和 setPrivateVar 方法可以間接訪問和修改私有變量。
具體來說:
- privateVar 是一個 局部變量,它被封閉在 MyClass 構(gòu)造函數(shù)內(nèi)部。
- getPrivateVar 和 setPrivateVar 函數(shù)能夠訪問并操作這個局部變量,即使它們被返回并在 MyClass 構(gòu)造函數(shù)外部執(zhí)行。這樣,privateVar 就保持了私有性,不會被外部直接訪問。
閉包的特性在此體現(xiàn):
- 詞法作用域:函數(shù)在定義時就會記錄它所能訪問的變量范圍,而不僅僅是在執(zhí)行時。
- 訪問私有數(shù)據(jù):通過閉包,外部代碼不能直接訪問 privateVar,但可以通過公共方法(如 getPrivateVar 和 setPrivateVar)間接訪問或修改它。
其中詞法作用域,又叫靜態(tài)作用域,變量被創(chuàng)建時就確定好了,而非執(zhí)行階段確定的。也就是說我們寫好代碼時它的作用域就確定了,JavaScript 遵循的就是詞法作用域。
2、使用 ES6 Symbol(符號) 模擬私有變量
Symbol 是 ES6 引入的一個新的基本數(shù)據(jù)類型,它可以用作對象的唯一屬性鍵,避免外部直接訪問。你可以用 Symbol 來創(chuàng)建私有變量。
Symbol 是 在 ES6引入的一種原始數(shù)據(jù)類型。它代表了一個獨一無二的、不可變的值。每個通過 Symbol() 創(chuàng)建的 Symbol 值都是唯一的,即使它們有相同的描述,也會被視為不同的值。
const privateVar = Symbol('privateVar');
class MyClass {
constructor() {
this[privateVar] = 'I am private';
}
getPrivateVar() {
return this[privateVar];
}
setPrivateVar(value) {
this[privateVar] = value;
}
}
const myInstance = new MyClass();
console.log(myInstance.getPrivateVar()); // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar()); // "New Value"
console.log(myInstance[privateVar]); // undefined (無法直接訪問私有變量)
使用 Symbol 可以避免變量名沖突,且 privateVar 作為一個 Symbol 類型,外部無法直接訪問它。
具體而言:
- privateVar 是一個 Symbol,它作為對象 MyClass 的私有屬性鍵。
- this[privateVar] 存儲了私有變量的值,并且外部無法直接通過 myInstance.privateVar 或 myInstance[‘privateVar’] 訪問它,因為它是由Symbol 創(chuàng)建的,外部不知道該 Symbol 的值。
- 通過 getPrivateVar 和 setPrivateVar 方法,外部可以間接訪問或修改這個私有變量的值。
3、使用 WeakMap 模擬私有變量
WeakMap 是一個鍵值對集合,鍵是對象,值可以是任意類型。利用 WeakMap,可以將私有數(shù)據(jù)存儲在一個外部的 WeakMap 中,確保數(shù)據(jù)與對象的生命周期關聯(lián),同時避免外部直接訪問私有數(shù)據(jù)。
const privateVars = new WeakMap();
class MyClass {
constructor() {
privateVars.set(this, { privateVar: 'I am private' });
}
getPrivateVar() {
return privateVars.get(this).privateVar;
}
setPrivateVar(value) {
privateVars.get(this).privateVar = value;
}
}
const myInstance = new MyClass();
console.log(myInstance.getPrivateVar()); // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar()); // "New Value"
console.log(privateVars.get(myInstance)); // { privateVar: 'New Value' } (直接訪問 WeakMap)
privateVars 存儲了對象實例的私有數(shù)據(jù),WeakMap 會將數(shù)據(jù)與對象的生命周期關聯(lián),不會阻止垃圾回收。
4、使用 ES2022 的 # 私有字段
在 ES2022 中,JavaScript 引入了類的私有字段(#)。使用 # 前綴定義的字段在類的外部無法直接訪問,這是一種新的原生私有變量實現(xiàn)方式。
class MyClass {
#privateVar; // 私有字段
constructor() {
this.#privateVar = 'I am private';
}
getPrivateVar() {
return this.#privateVar;
}
setPrivateVar(value) {
this.#privateVar = value;
}
}
const myInstance = new MyClass();
console.log(myInstance.getPrivateVar()); // "I am private"
myInstance.setPrivateVar('New Value');
console.log(myInstance.getPrivateVar()); // "New Value"
console.log(myInstance.#privateVar); // SyntaxError: Private field '#privateVar' must be declared in an enclosing class
#privateVar 是私有字段,外部無法訪問它,只有類的方法可以訪問。
總結(jié)
到此這篇關于JS中如何創(chuàng)建私有變量的文章就介紹到這了,更多相關JS創(chuàng)建私有變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
js事件源window.event.srcElement兼容性寫法(詳解)
下面小編就為大家?guī)硪黄猨s事件源window.event.srcElement兼容性寫法(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
javascript下高性能字符串連接StringBuffer類
使用StringBuffer類比使用加號節(jié)省50%左右的時間,大家對于大數(shù)據(jù)的連接最好使用這個方法。2010-08-08
js將URL網(wǎng)址轉(zhuǎn)為16進制加密與解密函數(shù)
這篇文章主要介紹了js將URL網(wǎng)址轉(zhuǎn)為16進制加密與解密函數(shù),很多朋友喜歡將網(wǎng)址轉(zhuǎn)換為16進制,網(wǎng)上實在找不到轉(zhuǎn)換為\x這樣的工具,于是手工改一下2020-03-03
用JS提交參數(shù)創(chuàng)建form表單在FireFox中遇到的問題
在一個前端頁面上,需要通過JavaScript來提交參數(shù),使用JS創(chuàng)建form表單,將參數(shù)append到表單中進行提交,接下來將介紹如何操作與實現(xiàn)2013-01-01

