JavaScript 私有类字段和 TypeScript 私有修饰符

做者：Valentino Gagliardi

翻译：疯狂的技术宅

原文：www.valentinog.com/blog/privat…

未经容许严禁转载

在本文中，咱们将对 JavaScript 私有类字段进行一些说明，并了解它们与 TypeScript 私有修饰符的区别。

JavaScript 私有类字段和隐私需求

在过去，JavaScript 没有保护变量不受访问的原生机制，固然除非是**典型闭包**。

闭包是 JavaScript 中许多相似于私有模式（如流行的模块模式）的基础。可是，近年来 ECMAScript 2015 类被使用后，开发人员感到须要对类成员的隐私进行更多控制。

类字段提案（在撰写本文时处于第 3 阶段）试图经过引入 私有类字段 来解决问题。

让咱们看看它们是什么样子的。

一个 JavaScript 私有类字段的例子

这是一个带有私有字段的 JavaScript 类，请注意，与“公有”成员不一样，每一个私有字段必须在访问前进行声明：

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

没法从类的外部访问私有类字段：

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
复制代码

这是真正的“隐私”。若是你会一点 TypeScript，可能会问“原生”私有字段与 TypeScript 中的 private 修饰符 有什么共同点。

好吧，答案是：没有。可是为何？

TypeScript 中的 private 修饰符

有着传统编程语言背景的开发人员应该熟悉 TypeScript 中的 private 修饰符。简而言之，此关键字的目的是拒绝从类的外部访问类成员。

可是请不要忘记，TypeScript 是处于 JavaScript 之上的一层，而且 TypeScript 编译器应该剥离全部花里胡哨的 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);
复制代码

若是没有 //@ts-ignore，在访问 liz.age 时仅会在 TypeScript 中引起错误，可是在编译以后，你将会获得下面的 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
复制代码

与预期的同样，咱们能够从控制台输出 liz.age。 这里的主要观点是 TypeScript 中的 private 不是那么私有，而且仅在 TypeScript 级别才感到方便，而不是“真正的隐私”。

接下来咱们开始讨论：TypeScript 中的“原生”私有类字段。

TypeScript 中的私有类字段

TypeScript 3.8 将支持 ECMAScript 私有字段，千万别和 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 没什么不一样。没法从外部访问成员。可是 TypeScript 中私有字段的真正问题在于它们在后台使用了 WeakMap。

要编译此代码，咱们须要调整 tsconfig.json 中的目标编译版本，该版本最低必须是 ECMAScript 2015：

{
  "compilerOptions": {
    "target": "es2015",
    "strict": true,
    "lib": ["dom","es2015"]
  }
}
复制代码

这可能会出现问题，具体取决于目标浏览器，除非你打算为 WeakMap 提供 polyfill，不然，若是只是为了编写精美的新语法，工做量就变得太多了。

JavaScript 中老是存在这种紧张关系，你确实想使用新语法，但另外一方面，你不想因为大量的 polyfill 影响使用户体验。

另外一方面，即便你但愿将其发布到较新的浏览器中，也没必要担忧私有类字段。最起码如今是这样。甚至Firefox都没有实施该建议。

结论

在撰写本文时它还是一项提案，JavaScript 类字段颇有趣，可是浏览器供应商的支持不好。 那么你对此功能有何见解？

这是个人：

• 我喜欢 ES 私有类字段（尽管我不喜欢 #）
• 我在 TypeScript 中从不依赖 private， 这仅在 TS 级别是有用的
• 我会等待浏览器提供私有类字段
• 我目前不会在 TS 中使用私有类字段

了解更多有关TypeScript类的信息：www.typescriptlang.org/docs/handbo…

TypeScript 3.8 私有字段的正式公告：devblogs.microsoft.com/typescript/…

欢迎关注前端公众号：前端先锋，免费领取前端工程化实用工具包。