什么是私有屬性

我們不摳定義，用大白話來(lái)說(shuō)，如果類中的某個(gè)屬性只能在類內(nèi)部使用，在類外部（比如通過(guò)類的實(shí)例）訪問(wèn)不到，這個(gè)屬性就是私有屬性。

我們用下面的代碼舉例說(shuō)明，當(dāng)然了，代碼中的屬性并不是私有屬性，只是為了說(shuō)明私有屬性是怎么一回事：

class Person {
  name = 'name'  // 我們假設(shè)name是一個(gè)私有屬性，當(dāng)然，它現(xiàn)在不是  
  getName() {
    return this.name // 類內(nèi)部可以訪問(wèn)私有屬性
  }
}
const person = new Person()
person.getName() // 'name'
person.name // 嘗試直接在類外部訪問(wèn)私有屬性會(huì)報(bào)錯(cuò)

如何實(shí)現(xiàn)

早期JavaScript并不支持私有屬性，所以只能通過(guò)一些變通的方法曲線救國(guó)。

基于命名規(guī)范的的弱約束

一種方式是在命名規(guī)范上加以約束，約定下劃線開(kāi)頭的屬性是私有屬性。

class Person {
  _name = 'name'  // 約定下劃線開(kāi)頭的屬性是私有屬性
  getName() {
    return this._name // 類內(nèi)部可以訪問(wèn)私有屬性
  }
}
const person = new Person()
person._name  // 開(kāi)發(fā)者可以不遵守命名規(guī)范，運(yùn)行時(shí)在類外部訪問(wèn)完全沒(méi)問(wèn)題

vue源碼中也有很多地方用下劃線開(kāi)頭的命名來(lái)表示屬性和變量。

但這終究是一種弱約束，運(yùn)行時(shí)完全可以在類外部訪問(wèn)到這些屬性，沒(méi)有任何問(wèn)題。

基于閉包

function Person(){
  const name = 'name'
  this.getName = function(){
    return name
  }
}
const person = new Person()
person.getName()  // 'name'
person.name // undefined

上面的代碼getName函數(shù)引用了Person函數(shù)的詞法環(huán)境，利用閉包的特性實(shí)現(xiàn)了私有屬性。私有屬性name在Person外部無(wú)法訪問(wèn)，只能通過(guò)特權(quán)方法getName訪問(wèn)到。

不過(guò)這種方式的缺點(diǎn)也很明顯：

私有屬性和特權(quán)方法都只能在構(gòu)造函數(shù)內(nèi)部聲明，而且，這里方法并不是掛載在原型上的，每實(shí)例化一個(gè)對(duì)象，就會(huì)生成一次方法。

將私有屬性移動(dòng)到類外部結(jié)合ES模塊

const name = 'name'
export class Person {
  getName() {
    return name
  }
}

上面的代碼，ES模塊僅導(dǎo)出類，不導(dǎo)出類外部的變量name，這樣一來(lái)類可以訪問(wèn)到變量name，而外部則訪問(wèn)不到。

const person = new Person()
person.getName() // 'name'
person.name // undefined

基于Symbol

const name = Symbol('name')
export class Person {
  [name] = 'name'
  getName() {
    return this[name]
  }
}

上面的代碼用變量存儲(chǔ)了一個(gè)Symbol值，在類內(nèi)部通過(guò)動(dòng)態(tài)屬性的方式為類添加了一個(gè)私有屬性。同樣的基于ES模塊僅導(dǎo)出類，而不導(dǎo)出Symbol。這樣在使用的時(shí)候就無(wú)法訪問(wèn)Symbol值聲明的私有屬性了。

const person = new Person()
person.getName() // 'name'

但是，其實(shí)還是有辦法獲取到這個(gè)Symbol值的。

const symbols = Object.getOwnPropertySymbols(person)
person[symbols[0])

所以，這種方式也并沒(méi)有那么私有。

TypeScript中的private

TypeScript中不是有private修飾符嗎，用這個(gè)試試怎么樣呢？

class Person {
  private name = 'name'
  getName() {
    return name
  }
}
const person = new Person()
person.getName() // 'name'
person.name // 編譯時(shí)錯(cuò)誤 Property 'name' is private and only accessible within class 'Person'.

在TypeScript中試圖在類外部訪問(wèn)private屬性會(huì)在編譯時(shí)報(bào)錯(cuò)，看起來(lái)很美好對(duì)吧。但別忘了TypeScript終究要被編譯成JavaScript的，我們來(lái)看看編譯結(jié)果：

編譯成JavaScript后，private修飾符沒(méi)有了。如果我們通過(guò)動(dòng)態(tài)屬性繞過(guò)編譯時(shí)的類型檢查，編譯后的JavaScript代碼在運(yùn)行時(shí)并不會(huì)報(bào)錯(cuò)：

person['name'] // 'name'

ES2022

ES2022正式引入了私有屬性，在屬性名前加上#來(lái)表示私有屬性。

class Person {
  #name = 'name'
  getName() {
    return this.#name
  }
}
const person = new Person()
person.getName() // 'name'
person.#name // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class

不過(guò)如果你把上面的代碼放在Chrome控制臺(tái)中執(zhí)行，可能會(huì)發(fā)現(xiàn)person.#name是可以訪問(wèn)到值的。這是因?yàn)閺腃hrome111開(kāi)始，開(kāi)發(fā)者工具里面可以讀寫(xiě)私有屬性，不會(huì)報(bào)錯(cuò)，原因是 Chrome 團(tuán)隊(duì)認(rèn)為這樣方便調(diào)試。

查看MDN了解更多有關(guān)私有屬性的知識(shí)。

WeakMap解決目前的兼容性

如果要考慮ES2022之前的兼容性，還可以用WeakMap來(lái)實(shí)現(xiàn)。

const privateFields = new WeakMap()
export class Person {
  constructor() {
    privateFields.set(this, {
      name: 'name'
    })
  }
  
  getName() {
    return privateFields.get(this).name
  }
}

上面的代碼在類外部維護(hù)了一個(gè)weakMap，然后在constructor中向weakMap綁定了實(shí)例this和{name: 'name'}的映射關(guān)系。訪問(wèn)的時(shí)候同樣通過(guò)this從weakMap中取出name。

同樣得益于ES模塊的特性，在模塊外部訪問(wèn)不到weakMap，自然就無(wú)法訪問(wèn)到私有屬性了。

const person = new Person()
person.getName() // 'name'

不過(guò)這樣的寫(xiě)法也有缺點(diǎn)，就是寫(xiě)法太繁瑣了，不夠直觀。其實(shí)上面ES2022私有屬性方案在babel編譯后的代碼基本就是和現(xiàn)在類似的方案。

可以看到babel編譯后的代碼變多了很多，因?yàn)橐ＷC程序的健壯性，必須考慮很多邊緣場(chǎng)景。僅看我紅框框出的代碼也可以看出，編譯后的代碼確實(shí)是采用了WeakMap的方案。

總結(jié)

本文總結(jié)了JavaScript中實(shí)現(xiàn)私有屬性的幾種方式，ES2022引入的私有屬性正式寫(xiě)法自然是正規(guī)軍，而且寫(xiě)法也很簡(jiǎn)潔。如果要考慮兼容性，WeakMap方案確實(shí)保證了私有性，不過(guò)寫(xiě)法略繁瑣。其余方案或多或少不夠健壯，了解即可。

以上就是JavaScript實(shí)現(xiàn)私有屬性的幾種方式小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript私有屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論