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

更新时间：2013年07月10日 11:27:40 作者：

这篇文章介绍了JavaScript模拟类机制及私有变量的方法及思路，有需要的朋友可以参考一下

在使用一些 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; // 其實还是返回一個函數
　　}

呵呵，感觉直白了许多。
这就完成了一个简单的类机制的构建。通过这种机制，可以创建类的构造函数、方法及属性，但这些显然都是公有的，那么，如何实现私有变量及方法呢？
我们知道，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中offsetleft属性的用法
本章节通过代码实例介绍一下offsetleft属性的用法，需要的朋友可以做一下参考。
2015-11-11
原生JS实现匀速图片轮播动画
这篇文章主要为大家详细介绍了原生JS实现匀速图片轮播动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
这篇文章主要介绍了微信小程序-基于ColorUI构建皮皮虾短视频去水印组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2020-11-11
详解JavaScript状态容器Redux
Redux官网上是这样描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript状态容器，提供可预测性的状态管理）。目前Redux GitHub有5w多star，足以说明 Redux 受欢迎的程度
2021-06-06
Google Suggest ;-) 基于js的动态下拉菜单
Google Suggest ;-) 基于js的动态下拉菜单...
2006-10-10
js动画效果打开层关闭层
js模拟弹窗效果代码，用层实现提示效果代码
2008-04-04
一篇文章深入了解JavaScript中的fetch方法
这篇文章主要给大家介绍了关于JavaScript中fetch方法的相关资料,JavaScript中的fetch()方法用于向服务器请求并加载网页中的信息,请求可以是返回JSON或XML格式数据的任何API,需要的朋友可以参考下
2023-10-10
js实现电梯导航效果的示例代码
这篇文章主要介绍了JavaScript实现电梯导航效果的相关知识,文中通过示例代码介绍的很详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
2023-12-12
JavaScript禁止复制与粘贴的实现代码
下面小编就为大家带来一篇JavaScript禁止复制与粘贴的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
微信小程序实现底部弹出框
这篇文章主要为大家详细介绍了微信小程序实现底部弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11