詳解ES6實現類的私有變數的幾種寫法

2021-10-19 08:29:21 字數 2179 閱讀 6788

閉包實現類的私有變數方式

私有變數不共享

通過 new 關鍵字 person 的建構函式內部的 this 將會指向 tom,開闢新空間,再次全部執行一遍,12

3456

78910

1112

1314

1516

1718

19class person 

this.addnum = function() }}

const tom = new person('tom')

const jack = new person('jack')

tom.addnum() 

console.log(tom.getnum()) //101

console.log(jack.getnum()) //100 

私有變數可共享

為避免每個實力都生成了乙個新的私有變數,造成是有變數不可共享的問題,我們可以將這個私有變數放在類的建構函式到外面,繼續通過閉包來返回這個變數。12

3456

78910

1112

1314

1516

1718

1920

21const person = (function ()

addnum()

getnum()  

}})() 

const tom = new person('tom')

const jack = new person('jack') 

tom.addnum()

console.log(tom.getnum()) //101

console.log(jack.getnum()) //101

那這樣的話,如果兩種方法混合使用,那就可以擁有可共享和不可共享的兩種私有變數。

缺點:例項化時會增加很多副本,比較耗記憶體。

symbol實現類的私有變數方式

symbol 簡介:

建立乙個獨一無二的值,所有 symbol 兩兩都不相等,建立時可以為其新增描述symble("desc"),目前物件的健也支援 symbol 了。12

3456

789const name = symbol('名字')

const person = `) 

} } 

person.say()

console.log(name)

使用symbol為物件建立的健無法迭代和json序列化,所以其最主要的作用就是為物件新增乙個獨一無二的值。

但可以使用getownproporitysymbols()獲取symbol.

缺點:新語法瀏覽器相容不是很廣泛。

symbol 實現類的私有變數

推薦使用閉包的方式建立 symbol 的的引用,這樣就可以在類的方法區獲得此引用,避免方法都寫在建構函式,每次建立新例項都要重新開闢空間賦值方法,造成記憶體浪費。12

3456

78910

1112

1314

1516

1718

1920

2122

const person = (function ()

addnum()

getnum()  

}})()

const tom = new person('tom')

const jack = new person('jack')

console.log(tom.addnum()) //101 

console.log(jack.getnum()) //100

通過 weakmap 建立私有變數

mdn 簡介

實現:123

4567

891011

1213

1415

1617

1819

20const parent = (function () ;

privates.set(this, me);

}getp()

} })()

let p = new parent()

console.log(p)

console.log(p.getp())

總結綜上 weakmap 的方式來實現類似私有變數省記憶體,易**,又能夠被更多的瀏覽器相容,也是最推薦的實現方法。

到此這篇關於詳解es6實現類的私有變數的幾種寫法的文章就介紹到這了

ES6 變數的解構賦值詳解

2.0 物件的解構賦值 2.1 物件的巢狀解構 3.0 字串的解構賦值 4.0 函式引數的解構賦值 5.0 解構賦值的用途 summary es 6 允許按照一定模式,從陣列和物件中提取值,對變數進行複製,這被稱為解構賦值 destructuring 事實上,只要某種資料結構具有 iterator ...

ES6 變數的解構賦值詳解

es6允許按照一定規則,從陣列和物件中提取值,對變數進行賦值,這被稱為解構賦值 destructuring 基本用法let a,b,c 1,3 a 1,b 3 c 上述 表示,可以從陣列中提取值,並且按照對應的位置,對變數賦值。本質上,這種寫法屬於模式匹配,只要等號兩邊的模式相同,左邊的變數就會被賦...

ES6 類的實現原理

一段符合es6語法的 class a render class b extends a render 我在babel官網上輸入,檢視轉碼 長很多,從中找出關鍵點 宣告classclass a 檢視對應轉碼var a function 可以看出宣告乙個class就是通過建立並執行乙個匿名函式,在這個匿...