前端 JS 经典:如何实现私有字段

简介: 前端 JS 经典:如何实现私有字段

前言:方法有很多,但是我们需要择优选择。

1. 命名规范

我们可以通过命名规范实现私有字段,如:下划线

缺点:没有强约束力,我们用了也就用了

class A {
  _key = 1;
}
 
const a = new A();
a._key; // 1

2. Symbol

使用 Symbol,类里用动态属性来设置。

缺点:没有强约束力,也能直接访问到。

const key = Symbol("key");
class A {
  [key] = 1;
 
  m() {
    return this[key];
  }
}
 
const a = new A();
a[key]; // 1

3. TS 的 private

使用 TS 的 private。当我们访问属性时,会报一个编译错误。

缺点:这种检查只在编译时态,在运行时态是没错的。可以通过动态属性,绕过编译时态,一样可以拿到 key。

class A {
  private key = 1;
}
 
const a = new A();
a.key; // error

4. ES 的新特性

使用 ES 新特性 #,再去访问#key 就会报错了,无论是编译时,还是运行时。但是因为是新出来的,有兼容性问题。

class A {
  #key = 1;
  m() {
    return this.#key;
  }
}

5. WeakMap

将一个类的私有属性都放在 map 里边。为什么要用 WeakMap ? 避免影响垃圾回收。然后将整个类放到一个模块里,只导出类,那么在外部,就只能通过方法 m() 拿到私有属性了。

const privateFields = new WeakMap();
 
export class A {
  constructor() {
    privateFields.set(this, { key: 1 });
  }
  m() {
    return privateFields.get(this).key;
  }
}


目录
相关文章
|
6天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
4天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
7天前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
22 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
8天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
7天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
24 4
|
7天前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
13 2
|
11天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
19 6
|
6天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
7天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴
下一篇
无影云桌面