在使用一些 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);
};
}
复制代码 代码如下:
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);
};
}
标签:
模拟类机制,私有变量
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript 模拟类机制及私有变量的方法及思路”评论...
更新动态
2024年11月13日
2024年11月13日
- 《忆蚀》Subliminal:揭秘后室之谜,路知行献声Weplay文化展
- 那英《征服NEWXRCD台湾版》日本压制[WAV+CUE]
- 群星《金曲百分百上》3CD(香港版)[WAV+CUE]
- 刘欢《雨中的树(新歌加精选)2CD》德国HD24K金碟[WAV+CUE]
- 郑源 《世间情歌》6N纯银SQCD[WAV+CUE][1G]
- 群星《粤潮2HQII》头版限量编号[低速原抓WAV+CUE][991M]
- 群星《2023好听新歌21》十倍音质 U盘音乐[WAV分轨][1G]
- 《热血传奇》双11感恩回馈 超值狂欢30天
- 原神5.2版本活动汇总 5.2版本活动有哪些
- 张敬轩.2010-NO.ELEVEN【环球】【WAV+CUE】
- 黄丽玲.2006-失恋无罪【艾回】【WAV+CUE】
- 阿达娃.2024-Laluna【W8VES】【FLAC分轨】
- 宝可梦大集结段位等级划分表大全 大集结段位一览
- 龙腾世纪影障守护者工坊与装备如何升级 工坊与装备升级说明
- 龙腾世纪影障守护者全成就攻略分享 龙腾世纪4全成就列表一览