Js私有属性的多种实现方式总汇

更新日期: 2022-03-29阅读: 871标签: 属性

JavaScript被很多人认为并不是一种面向对象语言,原因有很多种,比如JavaScript没有类,不能提供传统的类式继承;再比如JavaScript不能实现信息的隐藏,不能实现私有成员。本文并不是为了打破以上误解(实际上笔者自己也有困惑),只是简单介绍几种JavaScript实现私有属性的方式,以及各自的优劣。

1. 基于编码规范约定实现方式

很多编码规范把以下划线_开头的变量约定为私有成员,便于同团队开发人员的协同工作。实现方式如下:

function Person(name){
  this._name = name;
}

var person = new Person('Joe');

这种方式只是一种规范约定,很容易被打破。而且也并没有实现私有属性,上述代码中的实例person可以直接访问到_name属性:

alert(person._name); //'Joe'

2. 基于闭包的实现方式

另外一种比较普遍的方式是利用JavaScript的闭包特性。构造函数内定义局部变量和特权函数,其实例只能通过特权函数访问此变量,如下:

function Person(name){
  var _name = name;
  this.getName = function(){
    return _name;
  }
}

var person = new Person('Joe');

这种方式的优点是实现了私有属性的隐藏,Person 的实例并不能直接访问_name属性,只能通过特权函数getName获取:

alert(person._name); // undefined
alert(person.getName()); //'Joe'

使用闭包和特权函数实现私有属性的定义和访问是很多开发者采用的方式。但是这种方式存在一些缺陷:

  • 私有变量和特权函数只能在构造函数中创建。通常来讲,构造函数的功能只负责创建新对象,方法应该共享于prototype上。特权函数本质上是存在于每个实例中的,而不是prototype上,增加了资源占用。

3. 基于强引用散列表的实现方式

JavaScript不支持Map数据结构,所谓强引用散列表方式其实是Map模式的一种变体。简单来讲,就是给每个实例新增一个唯一的标识符,以此标识符为key,对应的value便是这个实例的私有属性,这对key-value保存在一个Object内。实现方式如下:

var Person = (function() {

    var privateData = {},
        privateId = 0;

    function Person(name) {
        Object.defineProperty(this, "_id", { value: privateId++ });

        privateData[this._id] = {
            name: name
        };
    }

    Person.prototype.getName = function() {
        return privateData[this._id].name;
    };

    return Person;
}());

上述代码的有以下几个特征:

  1. 使用自执行函数创建Person类,变量privateData和privateId被所有实例共享;
  2. privateData用来储存每个实例的私有属性name的key-value,privateId用来分配每个实例的唯一标识符_id;
  3. 方法getName存在于prototype上,被所有实例共享。

这种方式在目前ES5环境下,基本是最佳方案了。但是仍然有一个致命的缺陷:散列表privateData对每个实例都是强引用,导致实例不能被垃圾回收处理。如果存在大量实例必然会导致memory leak。

造成以上问题的本质是JavaScript的闭包引用,以及只能使用字符串类型最为散列表的key值。针对这两个问题,ES6新增的WeakMap可以良好的解决。

4. 基于WeakMap的实现方式

WeakMap有以下特点:

  1. 支持使用对象类型作为key值;
  2. 弱引用。

根据WeakMap的特点,便不必为每个实例都创建一个唯一标识符,因为实例本身便可以作为WeakMap的key。改进后的代码如下:

var Person = (function() {

    var privateData = new WeakMap();

    function Person(name) {
        privateData.set(this, { name: name });
    }

    Person.prototype.getName = function() {
        return privateData.get(this).name;
    };

    return Person;
}());

改进的代码不仅仅干净了很多,而且WeakMap是一种弱引用散列表, 这意味着,如果没有其他引用和该键引用同一个对象,这个对象将会被当作垃圾回收掉。解决了内存泄露的问题。

不幸的是,目前浏览器对WeakMap的支持率并不理想,投入生产环境仍然需要等待。

5、基于Proxy约束

Proxy 可以定义目标对象的 get、set、Object.keys 的逻辑,可以在这一层做一下判断,如果是下划线 _ 开头就不让访问,否则就可以访问。

比如还是这个 class:

class Dong {
    constructor() {
        this._name = 'dong';
        this._age = 20;
        this.friend = 'guang';
    }
    hello() {
        return 'I\'m ' + this._name + ', '  + this._age + ' years old';
    }
}
const dong = new Dong();

我们不直接调用它的对象的属性方法了,而是先用一层 Proxy 来约束下 get、set、getKeys 的行为:

const dong = new Dong();
const handler = {
    get(target, prop) {
        if (prop.startsWith('_')) {
            return;
        }
        return target[prop];
   },
   set(target, prop, value) {
    if (prop.startsWith('_')) {
        return;
     }
     target[prop] = value;
   },
   ownKeys(target, prop) {
      return Object.keys(target).filter(key => !key.startsWith('_'))
   },
 }
const proxy = new Proxy(dong, handler)

我们通过 new Proxy 来给 dong 定义了 get、set、ownKeys 的 handler:

  • get: 如果以下划线 _ 开头就返回空,否则返回目标对象的属性值 target[prop]。
  • set: 如果以下划线 _ 开头就直接返回,否则设置目标对象的属性值。
  • ownKeys: 访问 keys 时,过滤掉目标对象中下划线开头的属性再返回。

这样就实现了下划线开头的属性的私有化:

我们测试下:

const proxy = new Proxy(dong, handler)

for (const key of Object.keys(proxy)) {
    console.log(key, proxy[key])
}

确实,这里只打印了共有属性的方法,而下划线开头的那两个属性没有打印。我们基于 _prop 这种命名规范实现了真正的私有属性!


6、Symbol用于创建唯一的值

Symbol 是 es2015 添加的一个 api,用于创建唯一的值。基于这个唯一的特性,我们就可以实现私有属性。

比如这样:

const nameSymbol = Symbol('name');
const ageSymbol = Symbol('age');
class Dong {
    constructor() {
        this[nameSymbol] = 'dong';
        this[ageSymbol] = 20;
    }
    hello() {
        return 'I\'m ' + this[nameSymbol] + ', '  + this[ageSymbol] + ' years old';
    }
}
const dong = new Dong();

我们不再用 name 和 age 作为私有属性名了,而是用 Symbol 生成唯一的值来作为名字。


7、es新草案 #prop

现在有一个私有属性的 es 草案,可以通过 # 的方式来标识私有属性和方法。

比如这样:

class Dong {
    constructor() {
        this.#name = 'dong';
        this.#age = 20;
        this.friend = 'guang';
    }
    hello() {
        return 'I\'m ' + this.#name + this.#age + 'years old';
    }
}

这里的 name 和 age 都是私有的,而 friend 是共有的。

这种新语法 JS 引擎没那么快支持,但是可以通过 babel 或者 ts 编译器来编译成低版本语法的方式来提前用。

比如 babel 有 @babel/proposal-private-property-in-object 的插件,它可以实现这种语法的编译。




链接: https://www.fly63.com/article/detial/11298

display: none;与visibility: hidden;的区别

display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见,display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;

属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;

readonly与disabled的区别

readonly 只对 <input> 和 <textarea> 标签有效;disabled 对所有表单元素都有效, 包括:<input>, <textarea>, <button>, <label>, <option>, <select>等

css的overflow属性

事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差别,今天测试了一下,总算是明白了。visible: 不剪切内容。hidden: 将超出对象尺寸的内容进行裁剪,将不出现滚动条。scroll: 将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。

Vue Prop属性功能与用法实例

这篇文章主要介绍了Vue Prop属性功能与用法,结合实例形式较为详细的分析了vue.js中Prop属性的功能、原理、使用方法及相关操作注意事项,写的十分的全面细致,具有一定的参考价值

深入剖析z-index属性

层叠顺序的大小比较;层叠顺序级别高的元素覆盖级别低的元素。首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

css属性分类介绍

CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性

css中word-wrap white-space word-break textoverflow的使用

word-wrap正常来说,在一行文本中,如果出现这一行已经放不下的单词,浏览器会自动将该文字转入下一行。white-space规定段落中的文本不进行换行。

css使用到的border边框属性

border 在一个声明中设置所有的边框属性。 border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!