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

作者：Valentino Gagliardi
翻译：疯狂的技术宅

原文：https://www.valentinog.com/bl...

未经允许严禁转载

在本文中，我们将对 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类的信息：https://www.typescriptlang.or...

TypeScript 3.8 私有字段的正式公告：https://devblogs.microsoft.co...

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

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

JavaScript 私有类字段和隐私需求

一个 JavaScript 私有类字段的例子

TypeScript 中的 private 修饰符

TypeScript 中的私有类字段

结论

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

疯狂的技术宅

引用和评论

为什么浮点数运算会产生误差

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号