資訊專(zhuān)欄INFORMATION COLUMN
摘要：新增的語(yǔ)法非常帥，但是圍繞這個(gè)新的語(yǔ)法糖，在中如何實(shí)現(xiàn)靜態(tài)屬性私有屬性私有方法的問(wèn)題，成為了大家探討的話題。私有方法理論上講，私有屬性和私有方法的區(qū)別是，私有方法是函數(shù)。
ES6新增的class語(yǔ)法非常帥，但是圍繞這個(gè)新的語(yǔ)法糖，在class中如何實(shí)現(xiàn)靜態(tài)屬性、私有屬性、私有方法的問(wèn)題，成為了大家探討的話題。本文打算繞過(guò)現(xiàn)有的weakmap、symbol的方案，從最簡(jiǎn)單的實(shí)踐中抽取出滿足要求的方案。
靜態(tài)屬性靜態(tài)方法非常好實(shí)現(xiàn)，就是在普通方法名前面添加static關(guān)鍵字。那么靜態(tài)屬性呢？其實(shí)也可以通過(guò)static關(guān)鍵字來(lái)處理：
class MyClass {
static get name() {
return "my name"
}
}
這樣就可以使用MyClass.name獲取靜態(tài)屬性值了。而且因?yàn)闆](méi)有設(shè)置setter，所以這個(gè)靜態(tài)屬性值還不能被改變。當(dāng)然，你也可以把setter加上去。
私有屬性首先要搞明白“私有屬性”意味著幾層意思，不是說(shuō)形式上滿足需求就可以，而是要從代碼的機(jī)理上實(shí)現(xiàn)“私有”效果：
1 class內(nèi)部不同方法間可以使用，因此this要指向?qū)嵗瘜?duì)象（必須）
2 不能被外部訪問(wèn)，因此實(shí)例化對(duì)象person.name既不能獲得值，也不能設(shè)定值，應(yīng)該返回undefined，甚至應(yīng)該在實(shí)例化之后，并不知道有name這個(gè)屬性存在，開(kāi)發(fā)者甚至可以自己再person.name = "new name"動(dòng)態(tài)去創(chuàng)建一個(gè)非私有屬性（必須）
3 不能被繼承，因此extends后子類(lèi)不具備該屬性（必須）
4 方便的調(diào)用方式，比如類(lèi)this._name形式（備選）
上面這些應(yīng)該是作為私有屬性的主要條件，如果連這些都不滿足，很難談得上叫“私有屬性”。
實(shí)現(xiàn)方法：
var attributions = {}
function get(that, key) {
return attributions[that] && attributions[that][key]
}
function set(that, key, value) {
if(!attributions[that]) attributions[that] = {}
attributions[that][key] = value
}
class MyClass {
set() {
set(this, "name", "my name")
}
get() {
let name = get(this, "name")
console.log(name)
}
}
在類(lèi)外面有一個(gè)輔助對(duì)象attributions，兩個(gè)輔助函數(shù)set, get。它們將不被實(shí)例化對(duì)象直接訪問(wèn)，因此是一個(gè)相對(duì)封閉的空間，外部完全無(wú)法訪問(wèn)set, get函數(shù)操作的內(nèi)容，但對(duì)于類(lèi)的實(shí)例化對(duì)象而已，確實(shí)有自己對(duì)應(yīng)的屬性?xún)?nèi)容，因此，這種方案，可以代替類(lèi)內(nèi)部的私有屬性的功能。
私有方法理論上講，私有屬性和私有方法的區(qū)別是，私有方法是函數(shù)。因此，實(shí)際上，上面私有屬性的實(shí)現(xiàn)過(guò)程中已經(jīng)實(shí)現(xiàn)了私有方法，就是上面的set, get兩個(gè)輔助函數(shù)，這兩個(gè)函數(shù)幫助類(lèi)完成一些操作，同時(shí)對(duì)于每一個(gè)實(shí)例化對(duì)象而言都可以設(shè)置對(duì)應(yīng)的值，而且也不會(huì)被外部獲取。
getter和setter的實(shí)現(xiàn)現(xiàn)在很多類(lèi)實(shí)現(xiàn)了getter和setter，將內(nèi)部的數(shù)據(jù)管理和自身的屬性分開(kāi)，改變數(shù)據(jù)和改變屬性是兩回事。
var events = {}
var data = {}
class MyClass {
on(event, handler) {
if(!events[event]) events[event] = []
events[event].push(handler)
}
trigger(event, params = []) {
let evts = events[event]
if(Array.isArray(evts)) evts.forEach(callback => {
if(typeof callback === "function") {
if(Array.isArray(params)) callback.apply(this, params)
else callback.call(this, params)
}
})
}
get(key) {
return data[this] && data[this][key]
}
set(key, value, notify = true) {
if(!data[this]) data[this] = {}
data[this][key] = value
if(notify) {
this.trigger("change:" + key, value)
}
}
call(factory, ...args) {
factory.apply(this, args)
}
}
上面的類(lèi)中定義了我們最常用的on, trigger, get, set, call這幾個(gè)方法。使用方法：
var a = new MyClass()
a.on("change:name", value => console.log(value))
a.set("name", "my value")
這樣不僅可以有效的管理組織自己的數(shù)據(jù)，而且還可以通過(guò)綁定，實(shí)現(xiàn)數(shù)據(jù)變化的監(jiān)聽(tīng)。
求個(gè)兼職，如果您有web開(kāi)發(fā)方面的需要，可以聯(lián)系我，生活不容易，且行且珍惜。
我的個(gè)人博客 www.tangshuang.net 這里就不留信息了，請(qǐng)?jiān)诓┛土粞?，我?huì)聯(lián)系你
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86801.html
摘要：靜態(tài)屬性靜態(tài)方法目前支持靜態(tài)方法表示，類(lèi)屬性及靜態(tài)屬性目前作為提案還未正式成為標(biāo)準(zhǔn)。在中，抽象類(lèi)不能用來(lái)實(shí)例化對(duì)象，主要做為其它派生類(lèi)的基類(lèi)使用。不同于接口，抽象類(lèi)可以包含成員的實(shí)現(xiàn)細(xì)節(jié)。中也是這樣規(guī)定的抽象類(lèi)不允許直接被實(shí)例化。 嘗試重寫(xiě) 在此之前，通過(guò)《JavaScript => TypeScript 入門(mén)》已經(jīng)掌握了類(lèi)型聲明的寫(xiě)法。原以為憑著那一條無(wú)往不利的規(guī)則，就可以開(kāi)開(kāi)心心的...
摘要：前言在閱讀入門(mén)的時(shí)候，零散的看到有私有變量的實(shí)現(xiàn)，所以在此總結(jié)一篇。構(gòu)造函數(shù)應(yīng)該只做對(duì)象初始化的事情，現(xiàn)在為了實(shí)現(xiàn)私有變量，必須包含部分方法的實(shí)現(xiàn)，代碼組織上略不清晰。 前言 在閱讀 《ECMAScript 6 入門(mén)》的時(shí)候，零散的看到有私有變量的實(shí)現(xiàn)，所以在此總結(jié)一篇。 1. 約定 實(shí)現(xiàn) class Example { constructor() { this...
摘要：熟悉面向?qū)ο缶幊痰亩贾?，面向?qū)ο缶幊套钪匾脑瓌t之一從外部接口劃分內(nèi)部接口。所以，面向?qū)ο缶幊叹皖?lèi)似于汽車(chē)一樣。 熟悉面向?qū)ο缶幊痰亩贾?，面向?qū)ο缶幊套钪匾脑瓌t之一 - 從外部接口劃分內(nèi)部接口。也就是說(shuō)，針對(duì)某一類(lèi)事物，我們其實(shí)并不是那么在乎其內(nèi)部究竟是怎樣去實(shí)現(xiàn)的，只關(guān)心怎樣使用而已。 為了理解這點(diǎn)，讓我們先來(lái)看看現(xiàn)實(shí)生活中的列子。通常，我們使用的設(shè)備非常復(fù)雜。但是從外部接口界...
摘要：中有類(lèi)語(yǔ)法，定義類(lèi)變得簡(jiǎn)單了然而，并沒(méi)有提供私有屬性。按照此思路，在中其實(shí)也很容易模擬私有成員。問(wèn)題在于模擬的唯一性。在開(kāi)發(fā)階段這個(gè)值仍然是不可預(yù)料的。綜上，中模擬來(lái)實(shí)現(xiàn)私有屬性的目的已經(jīng)達(dá)到了。 ES6 中有類(lèi)語(yǔ)法，定義類(lèi)變得簡(jiǎn)單了 class Person { constructor(name) { this._name = name; } ...
摘要：綁定事件，傳入一個(gè)回調(diào)函數(shù)，但是這里還給加了一個(gè)功能，就是第三個(gè)參數(shù)規(guī)定回調(diào)函數(shù)執(zhí)行的順序。比如當(dāng)你給同一個(gè)事件傳入了多個(gè)回調(diào)函數(shù)，怎么來(lái)規(guī)定它們之間的順序呢通過(guò)傳入第三個(gè)參數(shù)即可，數(shù)字越小的，越靠前執(zhí)行。 ES6提供了完整的class語(yǔ)法，因此，可以非常方便的使用extends關(guān)鍵字對(duì)類(lèi)進(jìn)行擴(kuò)展（繼承）。為了實(shí)現(xiàn)類(lèi)的一些基礎(chǔ)功能，我撰寫(xiě)了下面這個(gè)類(lèi)，用以被其他類(lèi)繼承，擁有這個(gè)基礎(chǔ)類(lèi)的...
閱讀 3656·2023-04-26 02:10
閱讀 1477·2021-11-22 15:25
閱讀 1740·2021-09-22 10:02
閱讀 985·2021-09-06 15:02
閱讀 3542·2019-08-30 15:55
閱讀 666·2019-08-30 13:58
閱讀 2841·2019-08-30 12:53
閱讀 3132·2019-08-29 12:38
