基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言
在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中， 私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使出了各种奇技淫巧去实现 JS 中的私有成员，以下将介绍下目前实现 JS 私有成员特性的几个方案以及它们之间的优缺点对比。
现有的一些实现方案
约定命名方案
约定以下划线'_'开头的成员名作为私有成员，仅允许类成员方法访问调用，外部不得访问私有成员。简单的代码如下：
JavaScript
var MyClass = function () { this._privateProp = ‘privateProp';};MyClass.prototype.getPrivateProp = function () { return this._privateProp;};var my = new MyClass();alert(my.getPrivateProp()); // ‘privateProp';alert(my._privateProp); // 并未真正隐藏，依然弹出 ‘privateProp'优点
毫无疑问，约定命名是最简单的私有成员实现方案，没有代码层面上的工作。
调试方便，能够在控制台上直接看到对象上的私有成员，方便排查问题。
兼容性好，ie6+都支持
不足
无法阻止外部对私有成员的访问和变更，如果真有不知道或者不遵守约定的开发人员变更私有属性，也是无能为力。
必须强制或说服大家遵守这个约定，当然这个在有代码规范的团队中不是什么太大的问题。
es6 symbol 方案
在 es6中，引入了一个 Symbol 的特性，该特性正是为了实现私有成员而引入的。
主要的思路是，为每一个私有成员的名称产生一个随机且唯一的字符串key，这个 key 对外不可见，对内的可见性则是通过 js 的闭包变量实现，示例代码如下：
JavaScript
(function() { var privateProp = Symbol(); // 每次调用会产生一个唯一的key function MyClass() { this[privateProp] = ‘privateProp'; // 闭包内引用到这个 key } MyClass.prototype.getPrivateProp = function () { return this[privateProp]; };})();var my = new MyClass();alert(my.getPrivateProp()); // ‘privateProp';alert(my.privateProp); // 弹出 undefined，因为成员的key其实是随机字符串优点
弥补了命名约定方案的缺陷，外部无法通过正常途径获得私有成员的访问权。
调试便捷程度上可以接受，一般是通过给 symbol 的构造函数传入一个字符串参数，则控制台上对应的私有属性名称会展示为：Symbol(key)
兼容性不错，不支持 Symbol的浏览器可以很容易的 shim 出来。
不足
写法上稍显别扭，必须为每一个私有成员都创建一个闭包变量让内部方法可以访问。
外部还是可以通过 Object.getOwnPropertySymbols的方式获取实例的 symbol 属性名称，通过该名称获得私有成员的访问权。这种场景出现得比较少，且知道这种途径的开发人员水平相信都是有足够的能力知道自己的行为会有什么影响，因此这个不足点也算不上真正意义的不足。
es6 WeakMap 方案
在 es6 中引入了 Map, WeakMap 容器，最大的特点是容器的键名可以是任意的数据类型，虽说初衷不是为了实现私有成员引入，但意外的可以被用来实现私有成员特性。
主要的思路是，在类的级别上创建一个 WeakMap 容器，用于存储各个实例的私有成员，这个容器对外不可见，对内通过闭包方式可见；内部方法通过将实例作为键名获取容器上对应实例的私有成员，示例代码如下：
JavaScript
(function() { var privateStore = new WeakMap(); // 私有成员存储容器 function MyClass() { privateStore.set(this, {privateProp: ‘privateProp'}); // 闭包内引用到privateStore, 用当前实例做 key，设置私有成员 } MyClass.prototype.getPrivateProp = function () { return privateStore.get(this).privateProp; };})();var my = new MyClass();alert(my.getPrivateProp()); // ‘privateProp';alert(my.privateProp); // 弹出 undefined，实例上并没有 privateProp 属性优点
弥补了命名约定方案的缺陷，外部无法通过正常途径获得私有成员的访问权。
对 WeakMap 做一些封装，抽出一个私有特性的实现模块，可以在写法上相对 Symbol 方案更加简洁干净，其中一种封装的实现可以查看参考文章3。
最后一个是个人认为最大的优势：基于 WeakMap 方案，可以方便的实现保护成员特性（这个话题会在其他文章说到：））
不足
不好调试，因为是私有成员都在闭包容器内，无法在控制台打印实例查看对应的私有成员
待确认的性能问题，根据 es6的相关邮件列表，weakmap 内部似乎是通过顺序一一对比的方式去定位 key 的，时间复杂度为 O(n)，和 hash 算法的 O(1)相比会慢不少
最大的缺陷则是兼容性带来的内存膨胀问题，在不支持 WeakMap 的浏览器中是无法实现 WeakMap 的弱引用特性，因此实例无法被垃圾回收。 比如示例代码中 privateProp 是一个很大的数据项，无弱引用的情况下，实例无法回收，从而造成内存泄露。
现有实现方案小结
从上面的对比来看，Symbol方案最大优势在于很容易模拟实现；而WeakMap的优势则是能够实现保护成员， 现阶段无法忍受的不足是无法模拟实现弱引用特性而导致的内存问题。于是我的思路又转向了将两者优势结合起来的方向。
Symbol + 类WeakMap 的整合方案
在 WeakMap 的方案中最大的问题是无法 shim 弱引用，较次要的问题是不大方便调试。
shim 出来的 WeakMap 主要是无法追溯实例的生命周期，而实例上的私有成员的生命周期又是依赖实例， 因此将实例级别的私有成员部分放在实例上不就好了？ 实例没了，自然其属性也随之摧毁。而私有存储区域的隐藏则可以使用 Symol 来做。
该方案的提供一个 createPrivate 函数，该函数会返回一个私有的 token 函数，对外不可见，对内通过闭包函数获得， 传入当前实例会返回当前实例的私有存储区域。使用方式如下：
JavaScript
(function() { var $private = createPrivate(); // 私有成员 token 函数，可以传入对象参数，会作为原型链上的私有成员 function MyClass() { $private(this).privateProp = ‘privateProp' ; // 闭包内引用到privateStore, 用当前实例做 key，设置私有成员 } MyClass.prototype.getPrivateProp = function () { return $private(this).privateProp; };})();var my = new MyClass();alert(my.getPrivateProp()); // ‘privateProp';alert(my.privateProp); // 弹出 undefined，实例上并没有 privateProp 属性代码中主要就是实现 createPrivate 函数，大概的实现如下：
JavaScript
// createPrivate.jsfunction createPrivate(prototype) { var privateStore = Symbol('privateStore'); var classToken = Symbol(‘classToken'); return function getPrivate(instance) { if (!instance.hasOwnProperty(privateStore)) { instance[privateStore] = {}; } var store = instance[classToken]; store[token] = store[token] || Object.create(prototype || {}); return store[token]; };}上述实现做了两层存储，privateStore 这层是实例上统一的私有成员存储区域，而 classToken 对应的则是继承层次之间不同类的私有成员定义，基类有基类的私有成员区域，子类和基类的私有成员区域是不同的。
当然，只做一层的存储也可以实现，两层存储仅仅是为了调试方便，可以直接在控制台通过Symbol(‘privateStore')这个属性来查看实例各个层次的私有部分。
奇葩的 es5 property getter 拦截方案
该方案纯粹是闲得无聊玩了玩，主要是利用了 es5 提供的 getter，根据 argument.callee.caller 去判断调用场景，如果是外部的则抛异常或返回 undefined， 如果是内部调用则返回真正的私有成员，实现起来比较复杂，且不支持 strict 模式，不推荐使用。 有兴趣的同学可以看看实现。
总结
以上几个方案对比下来，我个人是倾向 Symbol+WeakMap 的整合方案，结合了两者的优点，又弥补了 WeakMap 的不足和 Symbol 书写的冗余。 当然了，我相信随着 JS 的发展，私有成员和保护成员也迟早会在语法层面上进行支持，正如 es6 对 class 关键字和 super 语法糖的支持一样， 只是现阶段需要开发者使用一些技巧去填补语言特性上的空白。
Javascript私有成员的实现方式
总体来讲这本书还是可以的，但看完这本书还留了几个问题一直困扰着我，如js中私有变量的实现，prototype等，经过自己一系列测试，现在终于弄明白了。
很多书上都是说，Javascript是不能真正实现Javascript私有成员的，因此在开发的时候，统一约定 __ 两个下划线开头为私有变量。
后来，发现Javascript中闭包的特性，从而彻底解决了Javascript私有成员的问题。
function testFn(){ var _Name;//定义Javascript私有成员 this.setName = function(name){ _Name = name; //从当前执行环境中获取_Name } this.getName = function(){ return _Name; } }// End testFn var test = testFn(); alert(typeof test._Name === "undefined")//true test.setName("KenChen"); test._Name 根本访问不到,但是用对象方法能访问到，因为闭包能从当前的执行环境中获取信息。
接下来我们看看,共有成员是怎样实现的
function testFn(name){ this.Name = name; this.getName = function(){ return this.Name; } } var test = new testFn("KenChen"); test.getName(); //KenChen test.Name = "CC"; est.getName();//CC 接下来在看看类静态变量是怎样实现的
function testFn(){ } testFn.Name = "KenChen"; alert(testFn.Name);//KenChen testFn.Name = "CC"; alert(testFn.Name);//CC 相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现，故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15
- 首先，我想到的是另建一个结果数组，用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较，检测是否重复。于是乎，我写出了如下代码A： Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要介绍了Javascript类型转换的规则实例解析，涉及到javascript类型转换相关知识，对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
- 虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24
- 神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念： 抽象语法树： 解释器模式并未解释如...2014-06-07
- tab切换在网页中很常见，故最近总结了4种实现方法。 首先，写出tab的框架，加上最简单的样式，代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
- ---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 （2）this.locati...2015-10-30
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中， 私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使...2015-10-30