提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript模拟方法思路变量 机制 私有
2023-06-13 09:15:03 时间
在使用一些Javascript框架时，或许会看到类似的代码
复制代码代码如下:

　　varMyClass=newClass({
　　　　initialize:function(param,...){
　　　　　　this.param=param;
　　　　　　...
　　　　},
　　　　func1:function(...){
　　　　　　...
　　　　}
　　});
　　varmyObj=newMyClass(param);
　　myObj.func1(...);

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

　　functionMyClass(param){
　　　　this.param=param;
　　　　this.func1=function(..){
　　　　　　...
　　　　};
　　}
　　varmyObj=newMyClass(param);
　　myObj.func1();

其实还是蛮简单的，也不难理解。不过如果要构建一套大型的Javascript类库，可能就会比较混乱，从一堆代码中，要找出哪些是类，哪些是函数，哪些是类方法，哪些是类属性，是一件痛苦的事。
当然，这里并不是要比较它们的优劣，只是好奇newClass的实现方式而已。
在上面的代码中，使用newMyClass()这样的语句，意味着MyClass必须是一个函数，同时也就意味着newClass需要返回一个函数对象，从字面的意思上可以看出，函数initialize是当做构造函数来使用的，所以，newClass返回的函数中，必须使用initialize来对对象进行初始化。基于这样的分析，可以得出以下代码：
复制代码代码如下:
　　functionClass(argu){
　　　　returnfunction(){
　　　　　　varinit=argu["initialize"]||function(){}; //如果没有构造函数initialize，使用一个空函数作为默认构造函数
　　　　　　for(varpinargu){
　　　　　　　　this[p]=argu[p];
　　　　　　}
　　　　　　init.apply(this,arguments);//使用当前函数的this来代替函数initialize原有的this
　　　　}
　　}

上面的代码并不够严谨，但用来说明问题已经足够了。需要注意init.apply(this,arguments)这一句，这里有几个变量的指代，一个是this，原本initialize中默认的this，现在已被替代为返回的这个匿名函数的this，而这个匿名函数，是通过newClass新建的自定义类的构造器。另外一个是arguments，它指代的是匿名函数的参数，也就是上面的newMyClass(param)中的param。
this的转换有些让人头晕，那么有没有更为简单的方法呢？请看下面的代码：
复制代码代码如下:
　　functionClass(argu){
　　　　varobj=argu["initialize"]||function(){};
　　　　for(varpinargu){
　　　　　　obj.prototype[p]=argu[p];//注意，这里用的是prototype
　　　　}
　　　　returnobj;//其??还是返回一??函??BR>　　}

呵呵，感觉直白了许多。
这就完成了一个简单的类机制的构建。通过这种机制，可以创建类的构造函数、方法及属性，但这些显然都是公有的，那么，如何实现私有变量及方法呢？
我们知道，Javascript类的私有变量可以通过闭包的机制来完成。但使用newClass({...})的方式转换后，显然很难形成有效的闭包。如何绕过这个问题呢？
Javascript提供了两个方法：eval()及函数对象的toString()方法，前者较为常见，而后者，可用于获取函数的具体代码。通过这两个方法，可以简单的模拟类的私有变量：
复制代码代码如下:
　　functionClass(argu){
　　　　var_=argu["private"]||{};
　　　　eval("varobj="+(argu["initialize"]||function(){}).toString());
　　　　for(varpinargu){
　　　　　　if(p=="initialize"||p=="private")
　　　　　　　　continue;
　　　　　　if(typeofargu[p]=="function")
　　　　　　　　eval("obj.prototype[p]="+argu[p].toString());
　　　　　　else
　　　　　　　　obj.prototype[p]=argu[p];
　　　　}
　　　　returnobj;
　　}

通过函数对象的toString()方法提取出函数的代码，并使用eval方法执行这些代码，这样就可以构造出一个有效的闭包范围，从而实现私有机制。我们可以如下应用：
复制代码代码如下:
　　varPerson=newClass({
　　　　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);
　　　　}
　　});
　　varmy=newPerson("Zh");
　　my.show();

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

相关文章