JavaScript 模拟类机制及私有变量的方法及思路


Posted in Javascript onJuly 10, 2013

在使用一些 Javascript 框架时,或许会看到类似的代码

var MyClass = new Class({


initialize: function(param, ...) {



this.param = param;



...


},


func1: function(...) {



...


}

});

var myObj = new MyClass(param);

myObj.func1(...);

这是一种典型的面向对象的类机制应用,与原生的 Javascript 类机制相比,显得更为清晰和自然。并且,在此基础上,实现类的继承也较为方便。那么,这是如何实现的呢?
众所周知,在 Javascript 中,将一个函数作为构造器,可以创建出一个对象,上面的代码可以简单的写成:
function MyClass(param) {


this.param = param;


this.func1 = function(..) {



...


};

}

var myObj = new MyClass(param);

myObj.func1();

其实还是蛮简单的,也不难理解。不过如果要构建一套大型的 Javascript 类库,可能就会比较混乱,从一堆代码中,要找出哪些是类,哪些是函数,哪些是类方法,哪些是类属性,是一件痛苦的事。
当然,这里并不是要比较它们的优劣,只是好奇 new Class 的实现方式而已。
在上面的代码中,使用 new MyClass() 这样的语句,意味着 MyClass 必须是一个函数,同时也就意味着 new Class 需要返回一个函数对象,从字面的意思上可以看出,函数 initialize 是当做构造函数来使用的,所以,new Class 返回的函数中,必须使用 initialize 来对对象进行初始化。基于这样的分析,可以得出以下代码:
function Class(argu) {


return function() {



var init = argu['initialize'] || function() {};  //如果没有构造函数 initialize,使用一个空函数作为默认构造函数



for(var p in argu) {




this[p] = argu[p];



}



init.apply(this, arguments); //使用当前函数的 this 来代替函数 initialize 原有的 this


}

}

上面的代码并不够严谨,但用来说明问题已经足够了。需要注意 init.apply(this, arguments) 这一句,这里有几个变量的指代,一个是 this,原本 initialize 中默认的 this,现在已被替代为返回的这个匿名函数的 this,而这个匿名函数,是通过 new Class 新建的自定义类的构造器。另外一个是 arguments,它指代的是匿名函数的参数,也就是上面的 new MyClass(param) 中的 param。
this 的转换有些让人头晕,那么有没有更为简单的方法呢?请看下面的代码:
function Class(argu) {


var obj = argu['initialize'] || function() {};


for(var p in argu) {



obj.prototype[p] = argu[p]; //注意,这里用的是 prototype


}


return obj; // 其??还是返回一??函??BR>
}

呵呵,感觉直白了许多。
这就完成了一个简单的类机制的构建。通过这种机制,可以创建类的构造函数、方法及属性,但这些显然都是公有的,那么,如何实现私有变量及方法呢?
我们知道,Javascript 类的私有变量可以通过闭包的机制来完成。但使用 new Class({...}) 的方式转换后,显然很难形成有效的闭包。如何绕过这个问题呢?
Javascript 提供了两个方法:eval() 及函数对象的 toString() 方法,前者较为常见,而后者,可用于获取函数的具体代码。通过这两个方法,可以简单的模拟类的私有变量:
function Class(argu) {


var _ = argu['private'] || {};


eval('var obj = ' + (argu['initialize'] || function() {}).toString());


for(var p in argu) {



if(p == 'initialize' || p == 'private')




continue;



if(typeof argu[p] == 'function')




eval('obj.prototype[p] = ' + argu[p].toString());



else




obj.prototype[p] = argu[p];


}


return obj;

}

通过函数对象的 toString() 方法提取出函数的代码,并使用 eval 方法执行这些代码,这样就可以构造出一个有效的闭包范围,从而实现私有机制。我们可以如下应用:
var Person = new Class({


private: {



height: 160,



weight: 50


},


initialize: function(name, height, weight) {



this.name = name;



_.height = height || _.height;



_.weight = weight || _.weight;


},


show: function() {



alert('Name:' + this.name + '/nheight:' + _.height + '/nweight:' + _.weight);


}

});

var my = new Person("Zh");

my.show();

看起来不不错,不过在实际应用中,其实并没有太大的用途。主要是效率上,相比通常的实现方式,大概需要多花四倍的时间。在大型类库的构建上,这是不可容忍的,而小型的应用中,实现下面的代码更为简单直接:
function MyClass(param) {


var privateVar = ...;


this.param = param;


this.func = function() {



alert(privateVar);


};

}

Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 #Javascript
javascript 手动给表增加数据的小例子
Jul 10 #Javascript
基于javascript 闭包基础分享
Jul 10 #Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 #Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 #Javascript
浅析js封装和作用域
Jul 09 #Javascript
js正则表达式的使用详解
Jul 09 #Javascript
You might like
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php实现的简单日志写入函数
2015/03/31 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
layui table 参数设置方法
2018/08/14 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
借款协议书
2014/09/16 职场文书
工会经费申请报告
2015/05/15 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android