JavaScript中的私有成员


Posted in Javascript onSeptember 18, 2006

JavaScript是世界上是被误解得最厉害的编程语言。有些人认为它不具备“信息隐藏”的能力,因为JavaScript的对象没有私有变量和方法。这是误解。JavaScript对象可以拥有私有成员,下面我们来看看怎么做。(SharkUI.com注:JavaScript并不是真正拥有私有、公有等等OOP的特性,这篇译文中提到的这些私有、公有、特权等特性,是利用JavaScript的其他特性(参看本文的“闭包”一节)“模拟”出来的。感兴趣的话可以搜索相关的文章来看,当然也可以不管这些,就当它是真正的OOP来用。Have fun!)

对象

JavaScript是建立在对象之上的。数组(Array)是对象,函数(Function)是对象,对象(Objects)当然也是对象。那什么是对象呢?对象是一组“名称:值”对(name-value pair)的集合。名称是字符串,值却可以是字符串、数值、布尔或对象(包括数组和函数)。对象通常是用哈希表来实现的,以便可以快速地取值。

如果值是一个函数,我们就可以把它当作一个“方法”。当对象的一个方法被执行,变量this就被设为对象本身。如此,方法就可以通过this变量来访问对象的实例。

对象可以通过“构造器(constructor)”来创建。构造器是一个拥有初始化对象的函数。构造器提供了类似其他语言中的“类(class)”所提供的特性和功能,包括静态变量和方法。

公有

对象的所有成员都是公有成员。任何函数都可以访问、修改或者删除这些成员,当然也可以添加新的成员。给对象添加成员的两种主要方法:

通过构造器

这种方法一般用来初始化对象实例的公有变量。构造器的this变量被用来给对象添加成员:

function Container(param) {
  this.member = param;
}

构造一个新的对象:

var myContainer = new Container('abc');

然后,公有变量 myContainer.member 就拥有了值 'abc'。

通过原型(prototype)

这种方法通常用来添加公有方法。在对象本身搜寻一个成员但没有找到时,就使用构造器的原型(prototype)成员。这种原型机制实现了面向对象所谓的 “继承(inheritance)”,同时也节省了内存。给创建自同一个构造器的所有的对象加上一个方法,只需要给构造器的prototype增加一个函数:

Container.prototype.stamp = function (string) {
  return this.member + string;
}

然后我们就可以调用这个方法:

myContainer.stamp('def')

返回'abcdef'。

私有

私有(Private)成员是由构造器创建的。通常构造器中用var声明的变量和函数参数成为私有成员。

function Container(param) {
  this.member = param;
  var secret = 3;
  var self = this;
}

这个构造器创建了三个私有的实例变量:param,secret和self。

function Container(param) {
  function dec() {
   if (secret > 0) {
     secret -= 1;
     return true;
   } else {
     return false;
   }
  }

  this.member = param;
  var secret = 3;
  var self = this;
}

私有方法dec会检查实例变量secret,如果它大于0,自减1并返回true;如果它小于0,返回false。这样就实现了由这个架造器所创建对象的dec函数只能用三次的功能。

按惯例,我们创建了一个私有变量self。私有方法可以通过它来访问到对象本身。但这只是一种权宜之计,因为《ECMAScript Language Specification》中有一个错误,使得内部函数的this变量被设置成一个错误值。

公有方法(SharkUI.com注:即上文说的通过prototype创建的方法)是无法调用私有方法的,所以为了能使用私有方法,我们需要引入特权方法(privileged method)。

特权

一个特权方法可以访问私有变量和方法,而它本身可以被公有方法和外界访问。你可以删除或替换一个特权方法,但不能修改它,也不能强制它放弃自己的密秘(SharkUI.com注:原文如此,可能是指它的特权,关于这点请高手指教)。

特权方法是在构造器内部通过this来创建的。

function Container(param) {
  function dec() {
   if (secret > 0) {
     secret -= 1;
     return true;
   } else {
     return false;
   }
  }

  this.member = param;
  var secret = 3;
  var self = this;

  this.service = function () {
   if (dec()) {
     return self.member;
   } else {
     return null;
   }
  };
}

service是一个特权方法。前三次调用myContainer.service()将返回'abc',之后将返回null。service通过调用私有方法dec来访问私有变量secret。对于其他对象和方法来说,可以访问到service,但不能直接访问到私有的成员。

闭包

这种公有、私有和特权成员模式的存在是由于JavaScript的内在机制:闭包。这意味着一个内部函数永远可以访问它外部函数的变量和参数,即使外部函数已经返回。这是JavaScript语言非常强大的一个特性。目前还没有关于JavaScript编程的书籍展示了如何来利用它,它们甚至都没有提到这一点。

私有和特权成员只能在对象初始化的时候创建,而公有成员可以被随时添加进来。

模式

公有
function Constructor(...) {
  this.membername = value;
}
Constructor.prototype.membername = value;
私有
function Constructor(...) {
  var self = this;
  var membername = value;
  function membername(...) {...}
}

注:这句代码:

function membername(...) {...}

事实上是以下代码的简略写法

var membername = function membername(...) {...};
特权
function Constructor(...) {
  this.membername = function (...) {...};
}

后记

Douglas Crockford的这篇文章为我们写出更优美的JavaSciprt程序奠定了基础,为我们创建出更合理的面向对象应用和框架带来了可能。在这篇译文快要完成的时候,惊诧的发现作者网站上出现了一个本文中文版的链接。好事!有越来越多的中国人开始关注这些“边边角角”的技术。虽然做了重复工作,但一样希望各位能从这篇文章中有所收益。也希望有更多的人能投入到原创和翻译前端技术文章中来,在多数人浮躁的时候,我们需要更多基础性的工作。一周一篇不多,一年一篇不少,只要开始了就行!

Javascript 相关文章推荐
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
javascript的事件描述
Sep 08 #Javascript
由浅到深了解JavaScript类
Sep 08 #Javascript
js常用函数 不错
Sep 08 #Javascript
Javascript 不能释放内存.
Sep 07 #Javascript
一些有关检查数据的JS代码
Sep 07 #Javascript
Mozilla中显示textarea中选择的文字
Sep 07 #Javascript
showModelessDialog()使用详解
Sep 07 #Javascript
You might like
php foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
JS中操作JSON总结
2020/12/06 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
BootStrap selectpicker
2016/06/20 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python实时获取cmd的输出
2015/12/13 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python 多线程的实例详解
2017/09/07 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
物业管理应届生求职信
2013/10/28 职场文书
电话客服工作职责
2014/07/27 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
反四风问题学习心得体会
2016/01/22 职场文书