详解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私有类字段和TypeScript私有修饰符的详细内容，更多关于JavaScript私有类字段和TypeScript私有修饰符的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript的public、private和privileged模式

    Summary 私有变量 在对象内部使用'var'关键字来声明,而且它只能被私有函数和特权方法访问. 私有函数 在对象的构造函数里声明(或者是通过var functionName=function(){...}来定义),它能被特权函数调用(包括对象的构造函数)和私有函数调用. 特权方法 通过this.methodName=function(){...}来声明而且可能被对象外部的代码调用.它可以使用:this.特权函数() 方式来调用特权函数,使用 :私有函数()方式来调用私有函数. 公共属性 通

  • 浅析TypeScript 命名空间

    TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上. 命名空间一个最明确的目的就是解决重名问题. 假设这样一种情况,当一个班上有两个名叫小明的学生时,为了明确区分它们,我们在使用名字之外,不得不使用一些额外的信息,比如他们的姓(王小明,李小明),或者他

  • Vue 使用typescript如何优雅的调用swagger API

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学. 前端如何优雅的调用呢? 入门版 根据文档,用axios自动来调用 // 应用管理相关接口 import axios from '../interceptors.js' // 获取应用列表 export const getList = (data) => { return axios({ url: '/app/list?s

  • 详解TypeScript中的类型保护

    概述 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 独有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 pet.swim();

  • JS中的public和private对象,即static修饰符

    复制代码 代码如下: //重新封装document对象 var Console={ Write:function(msg){alert(msg);} }; //Person对象 var Person={ _name:"zzl", //static public _age:28, PrintInfo:function(){Console.Write("name:"+Person._name+",age:"+this._age);} //public

  • JS装饰者模式和TypeScript装饰器

    JS装饰者模式和TypeScript装饰器

    装饰者模式介绍 装饰者模式(Decorator Pattern)也称为装饰器模式,在不改变对象自身的基础上,动态增加额外的职责.属于结构型模式的一种. 使用装饰者模式的优点:把对象核心职责和要装饰的功能分开了.非侵入式的行为修改. 举个例子来说,原本长相一般的女孩,借助美颜功能,也能拍出逆天的颜值.只要善于运用辅助的装饰功能,开启瘦脸,增大眼睛,来点磨皮后,咔嚓一拍,惊艳无比. 经过这一系列叠加的装饰,你还是你,长相不增不减,却能在镜头前增加了多重美.如果你愿意,还可以尝试不同的装饰风格,只要装

  • TypeScript 运行时类型检查补充工具

    TypeScript是静态类型系统,在编译时做类型检查.一般而言,如果项目所用到的所有库.模块都是基于ts的,那么静态类型已经可以避免大部分编程层面的类型问题.不过,在一些场景下来,单纯静态类型是无法解决问题的,部分数据是动态传入到系统中的,主要包含场景如下: 第三方数据源(接口API.本地持久化存储.postMessage等) 第三方调用者传参 全局状态变更 当然,还有其他可能,总之,单纯靠静态类型检查,无法解决运行时类型问题.因此,我写了tyshemo这个工具.它可以帮助我们完成运行时的类型

  • 你不知道的 TypeScript 高级类型(小结)

    前言 对于有 JavaScript 基础的同学来说,入门 TypeScript 其实很容易,只需要简单掌握其基础的类型系统就可以逐步将 JS 应用过渡到 TS 应用. // js const double = (num) => 2 * num // ts const double = (num: number): number => 2 * num 然而,当应用越来越复杂,我们很容易把一些变量设置为 any 类型,TypeScript 写着写着也就成了 AnyScript.为了让大家能更加深入

  • javascript中定义私有方法说明(private method)

    一度以为在javascript的世界里,所有方法都是公有的,无法真正从技术上定义一个私有方法,今天又一次发现:其实我错了! 复制代码 代码如下: var Person = function(name,sex){     this.name = name;     this.sex = sex;          var _privateVariable = "";//私有变量         //构造器中定义的方法,即为私有方法     function privateMethod()

  • 详解JavaScript私有类字段和TypeScript私有修饰符

    JavaScript私有类字段和隐私需求 在过去,JavaScript 没有保护变量不受访问的原生机制,当然除非是典型闭包. 闭包是 JavaScript 中许多类似于私有模式(如流行的模块模式)的基础.但是,近年来 ECMAScript 2015 类被使用后,开发人员感到需要对类成员的隐私进行更多控制. 类字段提案(在撰写本文时处于第 3 阶段)试图通过引入私有类字段来解决问题. 让我们看看它们是什么样子的. 一个 JavaScript 私有类字段的例子 这是一个带有私有字段的 JavaScr

  • 详解JavaScript 新语法之Class 的私有属性与私有方法

    译者按: 为什么偏要用 # 符号? 原文:JavaScript's new #private class fields •译者:Fundebug 本文采用意译,版权归原作者所有 proposal-class-fields与proposal-private-methods定义了 Class 的私有属性以及私有方法,这 2 个提案已经处于 Stage 3,这就意味着它们已经基本确定下来了,等待被加入到新的 ECMAScript 版本中.事实上,最新的 Chrome 已经支持了 Class 私有属性.

  • 详解ES6实现类的私有变量的几种写法

    详解ES6实现类的私有变量的几种写法

    闭包实现类的私有变量方式 私有变量不共享 通过 new 关键字 person 的构造函数内部的 this 将会指向 Tom,开辟新空间,再次全部执行一遍, class Person{ constructor(name){ let _num = 100; this.name = name; this.getNum = function(){ return _num; } this.addNum = function(){ return ++_num } } } const tom = new Pe

  • 详解mybatis-plus实体类中字段和数据库中字段名不对应解决办法

    详解mybatis-plus实体类中字段和数据库中字段名不对应解决办法

    在使用mybatis或者mybatis-plus时候,有些时候会出现数据库的字段名和实体类的字段名不一致的情况,如果运行那么这个字段就会无法进行自动映射而报错.这里就以我的数据库name字段名和这里的实体类的u_name字段名为例. 解决办法有以下三种 方法一: 将数据库中的字段和实体类中的字段名修改成一样的名字 方法二: 如果是自定以mapper.xml文件中手写的sql查询语句,可以给字段起一个别名例如这里就可以写成select name as u_name from- 方法三: 使用注解@

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 详解JavaScript原始数据类型Symbol

    简介 创建symbol变量最简单的方法是用Symbol()函数.sysmbol变量有两点比较特别: 1.它可以作为对象属性名.只有字符串和 symbol 类型才能用作对象属性名. 2.没有两个symbol 的值是相等的. const symbol1 = Symbol(); const symbol2 = Symbol(); symbol1 === symbol2; // false const obj = {}; obj[symbol1] = 'Hello'; obj[symbol2] = 'W

  • 一文详解JavaScript闭包典型应用

    一文详解JavaScript闭包典型应用

    目录 1.应用 1.1 模拟私有变量 1.2 柯里化 1.3 偏函数 1.4 防抖 1.5 节流 2.性能问题 2.1 内存泄漏 2.2 常见的内存泄漏 3.闭包与循环体 3.1 这段代码输出啥 3.2 改造方法 4.总结 1.应用 以下这几个方面是我们开发中最为常用到的,同时也是面试中回答比较稳的几个方面. 1.1 模拟私有变量 我们都知道JS是基于对象的语言,JS强调的是对象,而非类的概念,在ES6中,可以通过class关键字模拟类,生成对象实例. 通过class模拟出来的类,仍然无法实现传

  • 详解JavaScript中的变量命名规范

    目录 驼峰命名 根据变量类型来命名 普通变量/属性 布尔变量/属性 普通函数/方法 回调.钩子函数 类 注意一致性 介词一致性 顺序一致性 表里一致性 时间一致性 其他注意事项 避免使用不常用的缩写 避免使用容易混淆的字母和数字 避免变量命名过于抽象 驼峰命名 首先,和其他语言一样,大部分变量建议采用驼峰命名法. var articleTitle = 'javascript变量命名规范' 而对于常量,使用大写字母和下划线来组合命名. const COUNTRY_NAME = 'China' 根据

  • 详解JavaScript基于面向对象之创建对象（2）

    接着上文<详解JavaScript基于面向对象之创建对象(1)>继续学习. 4.原型方式        我们创建的每个函数都有一个通过prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.逻辑上可以这么理解:prototypt通过条用构造函数而创建的那个对象的原型对象.使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法.也就是说,不必在构造函数中定义对象信息,而是直接将这些信息添加到原型中.        原型方式利用了对象的pr

  • 详解JavaScript基于面向对象之继承

    详解JavaScript基于面向对象之继承

    一.面相对象继承机制       这个实例使用UML很好的解释了继承机制.       说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种,具有不同数量的边.正方形是矩形的一种,所有的边等长.这就构成了一种完美的继承关系,很好的解释了面向对象的继承机制.        在这个例子中,形状是椭圆形和多边形的基类(通常我们也可以叫它父类,所有类都由

随机推荐