原文:JavaScript实现私有属性

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'

使用闭包和特权函数实现私有属性的定义和访问是很多开发者采用的方式,Douglas Crockford也曾在博客中提到过这种方式。但是这种方式存在一些缺陷:

  • 私有变量和特权函数只能在构造函数中创建。通常来讲,构造函数的功能只负责创建新对象,方法应该共享于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的支持率并不理想,投入生产环境仍然需要等待。

参考文献:

  1. WeakMap - MDN;
  2. WeakMap Objects - ES6;
  3. Private_Properties - MDN;
  4. Private instance members with weakmaps in JavaScript by Nicholas C. Zakas

JavaScript实现私有属性的更多相关文章

  1. JavaScript中的私有属性

    一.使用构造函数获得私有属性: function Gadget(){ var name = 'iPod'; this.getName = function(){ return name; }; }; ...

  2. javaScript在私有的属性和方法

    javaScript并没有什么特别的语法来代表私人.保.或公共的属性和方法,在这一点上与 java或其他语言是不同的.JavaScript大家是共同的所有对象: var myobj={ mypop:1 ...

  3. JavaScript 新语法详解:Class 的私有属性与私有方法

    译者按: 为什么偏要用 # 符号? 原文:JavaScript's new #private class fields 译者:Fundebug 本文采用意译,版权归原作者所有 proposal-cla ...

  4. javascript私有属性失效及解决方案

    1.js创建私有属性的方法 在 javascript 中所有对象的成员是公有的 构造函数也是如此: function Gadget ( ) { this.name = ' jack '; this.p ...

  5. JavaScript基础对象创建模式之私有属性和方法(024)

    JavaScript没有特殊的语法来表示对象的私有属性和方法,默认的情况下,所有的属性和方法都是公有的.如下面用字面声明的对象: var myobj = { myprop: 1, getProp: f ...

  6. JavaScript 公有 私有 静态属性和方法

    1.公有属性和公有方法 这里的 name  age  都是参数传递进去 可以在外面直接实例化调用. 2.私有属性和方法 私有的只能在函数内部使用 作用域的原因 3.静态属性和静态方法 这里我首先 创建 ...

  7. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  8. [转] JavaScript中的属性:如何遍历属性

    在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从 ...

  9. javascript中类的属性研究

    原文:javascript中类的属性研究 本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很 ...

随机推荐

  1. SqlDataAdapter类

    SqlDataAdapter类常用操作 SqlDataAdapter常用于从数据库中返回一个结果集时. 常用操作: Fill(); 示例: static void Main(string[] args ...

  2. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. Android APK安装包瘦身[转]

    很显然,APK安装包越小越好.下面从代码,资源文件,使用策略几个方面简要介绍下: 代码 保持良好的编程习惯,不要重复或者不用的代码,谨慎添加libs,移除使用不到的libs. 使用proguard混淆 ...

  4. AngularJS中文介绍

    简介   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小 ...

  5. Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET

    Ueditor文本编辑器(新浪SAE平台版本) - 下载频道 - CSDN.NET Ueditor文本编辑器(新浪SAE平台版本)

  6. GridBagLayout练习

    摘自http://blog.csdn.net/qq_18989901/article/details/52403737  GridBagLayout的用法 GridBagLayout是面板设计中最复杂 ...

  7. Java Base64编码与图片互转

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...

  8. DICOM:C-GET与C-MOVE对照剖析

    背景: 之前专栏中介绍最多的两款PACS各自是基于dcmtk的dcmqrscp以及Orthanc.和基于fo-dicom的DicomService(自己开发的).该类应用场景都是针对于局域网,因此在使 ...

  9. 【Oracle】删除重复记录

    --复习autotrace: SET AUTOTRACE OFF --不生成AUTOTRACE 报告,这是缺省模式 SET AUTOTRACE ON EXPLAIN --AUTOTRACE只显示优化器 ...

  10. struts2复习(五)拦截器总结

    1. 拦截器(Interceptor): 拦截器是Struts2的核心,Struts2的众多功能都是通过拦截器来实现的. 2. 拦截器的配置 1)编写实现Interceptor 接口的类.  2)在s ...