JavaScript私有類字段和隱私需求

在過(guò)去，JavaScript 沒(méi)有保護(hù)變量不受訪問(wèn)的原生機(jī)制，當(dāng)然除非是典型閉包。

閉包是 JavaScript 中許多類似于私有模式（如流行的模塊模式）的基礎(chǔ)。但是，近年來(lái) ECMAScript 2015 類被使用后，開(kāi)發(fā)人員感到需要對(duì)類成員的隱私進(jìn)行更多控制。

類字段提案（在撰寫(xiě)本文時(shí)處于第 3 階段）試圖通過(guò)引入私有類字段來(lái)解決問(wèn)題。

讓我們看看它們是什么樣子的。

一個(gè) JavaScript 私有類字段的例子

這是一個(gè)帶有私有字段的 JavaScript 類，請(qǐng)注意，與“公有”成員不同，每個(gè)私有字段必須在訪問(wèn)前進(jìn)行聲明：

class Person {
  #age;
  #name;
  #surname;
  constructor(name, surname, age) {
    this.#name = name;
    this.#surname = surname;
    this.#age = age;
  }
  getFullName() {
    return `${this.#name} + ${this.#surname}`;
  }
}

無(wú)法從類的外部訪問(wèn)私有類字段：

class Person {
  #age;
  #name;
  #surname;
  constructor(name, surname, age) {
    this.#name = name;
    this.#surname = surname;
    this.#age = age;
  }
  getFullName() {
    return `${this.#name} + ${this.#surname}`;
  }
}
const marta = new Person("Marta", "Cantrell", 33);
console.log(marta.#age); // SyntaxError

這是真正的“隱私”。如果你會(huì)一點(diǎn) TypeScript，可能會(huì)問(wèn)“原生”私有字段與TypeScript 中的 private 修飾符有什么共同點(diǎn)。

好吧，答案是：沒(méi)有。但是為什么？

TypeScript 中的 private 修飾符

有著傳統(tǒng)編程語(yǔ)言背景的開(kāi)發(fā)人員應(yīng)該熟悉 TypeScript 中的 private 修飾符。簡(jiǎn)而言之，此關(guān)鍵字的目的是拒絕從類的外部訪問(wèn)類成員。

但是請(qǐng)不要忘記，TypeScript 是處于 JavaScript 之上的一層，并且 TypeScript 編譯器應(yīng)該剝離所有花里胡哨的 TypeScript 注釋，包括private。

這意味著下面的類做不到你想要的工作：

class Person {
  private age: number;
  private name: string;
  private surname: string;
  constructor(name: string, surname: string, age: number) {
    this.name = name;
    this.surname = surname;
    this.age = age;
  }
  getFullName() {
    return `${this.name} + ${this.surname}`;
  }
}
const liz = new Person("Liz", "Cantrill", 31);
// @ts-ignore
console.log(liz.age);

如果沒(méi)有//@ts-ignore，在訪問(wèn)liz.age時(shí)僅會(huì)在 TypeScript中引發(fā)錯(cuò)誤，但是在編譯之后，你將會(huì)得到下面的 JavaScript代碼：

"use strict";
var Person = /** @class */ (function () {
    function Person(name, surname, age) {
        this.name = name;
        this.surname = surname;
        this.age = age;
    }
    Person.prototype.getFullName = function () {
        return this.name + " + " + this.surname;
    };
    return Person;
}());
var liz = new Person("Liz", "Cantrill", 31);
console.log(liz.age); // 31

與預(yù)期的一樣，我們可以從控制臺(tái)輸出liz.age。這里的主要觀點(diǎn)是 TypeScript 中的 private 不是那么私有，并且僅在 TypeScript 級(jí)別才感到方便，而不是“真正的隱私”。

接下來(lái)我們開(kāi)始討論：TypeScript 中的“原生”私有類字段。

TypeScript 中的私有類字段

TypeScript 3.8 將支持 ECMAScript 私有字段，千萬(wàn)別和TypeScript private 修飾符混淆。

這是在 TypeScript 中具有私有類字段的類：

class Person {
    #age: number;
    #name: string;
    #surname: string;
    constructor(name:string, surname:string, age:number) {
        this.#name = name;
        this.#surname = surname;
        this.#age = age;
    }
    getFullName() {
        return `${this.#name} + ${this.#surname}`;
    }
}

除了類型注釋外，與原生 JavaScript 沒(méi)什么不同。無(wú)法從外部訪問(wèn)成員。但是 TypeScript 中私有字段的真正問(wèn)題在于它們?cè)诤笈_(tái)使用了 WeakMap。

要編譯此代碼，我們需要調(diào)整 tsconfig.json 中的目標(biāo)編譯版本，該版本最低必須是ECMAScript 2015：

{
  "compilerOptions": {
    "target": "es2015",
    "strict": true,
    "lib": ["dom","es2015"]
  }
}

這可能會(huì)出現(xiàn)問(wèn)題，具體取決于目標(biāo)瀏覽器，除非你打算為 WeakMap 提供polyfill，否則，如果只是為了編寫(xiě)精美的新語(yǔ)法，工作量就變得太多了。

JavaScript 中總是存在這種緊張關(guān)系，你確實(shí)想使用新語(yǔ)法，但另一方面，你不想由于大量的 polyfill 影響使用戶體驗(yàn)。

另一方面，即使你希望將其發(fā)布到較新的瀏覽器中，也不必?fù)?dān)心私有類字段。最起碼現(xiàn)在是這樣。甚至Firefox都沒(méi)有實(shí)施該建議。

以上就是詳解JavaScript私有類字段和TypeScript私有修飾符的詳細(xì)內(nèi)容，更多關(guān)于JavaScript私有類字段和TypeScript私有修飾符的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！