前端 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;
  }
}


目录
相关文章
|
2月前
|
JavaScript 前端开发 API
|
3月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
184 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
91 8
|
2月前
|
JavaScript 前端开发 容器
|
2月前
|
JavaScript 前端开发
|
2月前
|
存储 JavaScript 前端开发
|
2月前
|
移动开发 JavaScript 前端开发
|
2月前
|
存储 JavaScript 前端开发
|
2月前
|
JavaScript 前端开发
|
2月前
|
JavaScript 前端开发