闪存
首页
新随笔
联系
管理
订阅
随笔- 167
文章- 0
评论- 1936
javascript继承详解(三)
在第一章中,我们使用构造函数和原型的方式在javascript的世界中实现了类和继承, 但是存在很多问题。这一章我们将会逐一分析这些问题,并给出解决方案。
注:本章中的jclass的实现参考了simple javascript inheritance的做法。
首先让我们来回顾一下第一章中介绍的例子:
function person(name) {
this.name = name;
}
person.prototype = {
getname: function() {
return this.name;
}
}
function employee(name, employeeid) {
this.name = name;
this.employeeid = employeeid;
}
employee.prototype = new person();
employee.prototype.getemployeeid = function() {
return this.employeeid;
};
var zhang = new employee("zhangsan", "1234");
console.log(zhang.getname()); // "zhangsan"
修正constructor的指向错误
从上一篇文章中关于constructor的描述,我们知道employee实例的constructor会有一个指向错误,如下所示:
var zhang = new employee("zhangsan", "1234");
console.log(zhang.constructor === employee); // false
console.log(zhang.constructor === object); // true
我们需要简单的修正:
function employee(name, employeeid) {
this.name = name;
this.employeeid = employeeid;
}
employee.prototype = new person();
employee.prototype.constructor = employee;
employee.prototype.getemployeeid = function() {
return this.employeeid;
};
var zhang = new employee("zhangsan", "1234");
console.log(zhang.constructor === employee); // true
console.log(zhang.constructor === object); // false
创建employee类时实例化person是不合适的
但另一方面,我们又必须依赖于这种机制来实现继承。 解决办法是不在构造函数中初始化数据,而是提供一个原型方法(比如init)来初始化数据。
// 空的构造函数
function person() {
}
person.prototype = {
init: function(name) {
this.name = name;
},
getname: function() {
return this.name;
}
}
// 空的构造函数
function employee() {
}
// 创建类的阶段不会初始化父类的数据,因为person是一个空的构造函数
employee.prototype = new person();
employee.prototype.constructor = employee;
employee.prototype.init = function(name, employeeid) {
this.name = name;
this.employeeid = employeeid;
};
employee.prototype.getemployeeid = function() {
return this.employeeid;
};
这种方式下,必须在实例化一个对象后手工调用init函数,如下:
var zhang = new employee();
zhang.init("zhangsan", "1234");
console.log(zhang.getname()); // "zhangsan"
如何自动调用init函数?
必须达到两个效果,构造类时不要调用init函数和实例化对象时自动调用init函数。看来我们需要在调用空的构造函数时有一个状态标示。
// 创建一个全局的状态标示 - 当前是否处于类的构造阶段
var initializing = false;
function person() {
if (!initializing) {
this.init.apply(this, arguments);
}
}
person.prototype = {
init: function(name) {
this.name = name;
},
getname: function() {
return this.name;
}
}
function employee() {
if (!initializing) {
this.init.apply(this, arguments);
}
}
// 标示当前进入类的创建阶段,不会调用init函数
initializing = true;
employee.prototype = new person();
employee.prototype.constructor = employee;
initializing = false;
employee.prototype.init = function(name, employeeid) {
this.name = name;
this.employeeid = employeeid;
};
employee.prototype.getemployeeid = function() {
return this.employeeid;
};
// 初始化类实例时,自动调用类的原型函数init,并向init中传递参数
var zhang = new employee("zhangsan", "1234");
console.log(zhang.getname()); // "zhangsan"
但是这样就必须引入全局变量,这是一个不好的信号。
如何避免引入全局变量initializing?
我们需要引入一个全局的函数来简化类的创建过程,同时封装内部细节避免引入全局变量。
// 当前是否处于创建类的阶段
var initializing = false;
function jclass(baseclass, prop) {
// 只接受一个参数的情况 - jclass(prop)
if (typeof (baseclass) === "object") {
prop = baseclass;
baseclass = null;
}
// 本次调用所创建的类(构造函数)
function f() {
// 如果当前处于实例化类的阶段,则调用init原型函数
if (!initializing) {
this.init.apply(this, arguments);
}
}
// 如果此类需要从其它类扩展
if (baseclass) {
initializing = true;
f.prototype = new baseclass();
f.prototype.constructor = f;
initializing = false;
}
// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasownproperty(name)) {
f.prototype[name] = prop[name];
}
}
return f;
};
使用jclass函数来创建类和继承类的方法:
var person = jclass({
init: function(name) {
this.name = name;
},
getname: function() {
return this.name;
}
});
var employee = jclass(person, {
init: function(name, employeeid) {
this.name = name;
this.employeeid = employeeid;
},
getemployeeid: function() {
return this.employeeid;
}
});
var zhang = new employee("zhangsan", "1234");
console.log(zhang.getname()); // "zhangsan"
ok,现在创建类和实例化类的方式看起来优雅多了。 但是这里面还存在明显的瑕疵,employee的初始化函数init无法调用父类的同名方法。
如何调用父类的同名方法?
我们可以通过为实例化对象提供一个base的属性,来指向父类(构造函数)的原型,如下:
// 当前是否处于创建类的阶段
var initializing = false;
function jclass(baseclass, prop) {
// 只接受一个参数的情况 - jclass(prop)
if (typeof (baseclass) === "object") {
prop = baseclass;
baseclass = null;
}
// 本次调用所创建的类(构造函数)
function f() {
// 如果当前处于实例化类的阶段,则调用init原型函数
if (!initializing) {
// 如果父类存在,则实例对象的base指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseclass) {
this.base = baseclass.prototype;
}
this.init.apply(this, arguments);
}
}
// 如果此类需要从其它类扩展
if (baseclass) {
initializing = true;
f.prototype = new baseclass();
f.prototype.constructor = f;
initializing = false;
}
// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasownproperty(name)) {
f.prototype[name] = prop[name];
}
}
return f;
};
调用方式:
var person = jclass({
init: function(name) {
this.name = name;
},
getname: function() {
return this.name;
}
});
var employee = jclass(person, {
init: function(name, employeeid) {
// 调用父类的原型函数init,注意使用apply函数修改init的this指向
this.base.init.apply(this, [name]);
this.employeeid = employeeid;
},
getemployeeid: function() {
return this.employeeid;
},
getname: function() {
// 调用父类的原型函数getname
return "employee name: " + this.base.getname.apply(this);
}
});
var zhang = new employee("zhangsan", "1234");
console.log(zhang.getname()); // "employee name: zhangsan"
目前为止,我们已经修正了在第一章手工实现继承的种种弊端。 通过我们自定义的jclass函数来创建类和子类,通过原型方法init初始化数据, 通过实例属性base来调用父类的原型函数。
唯一的缺憾是调用父类的代码太长,并且不好理解, 如果能够按照如下的方式调用岂不是更妙:
var employee = jclass(person, {
init: function(name, employeeid) {
// 如果能够这样调用,就再好不过了
this.base(name);
this.employeeid = employeeid;
}
});
优化jclass函数
// 当前是否处于创建类的阶段
var initializing = false;
function jclass(baseclass, prop) {
// 只接受一个参数的情况 - jclass(prop)
if (typeof (baseclass) === "object") {
prop = baseclass;
baseclass = null;
}
// 本次调用所创建的类(构造函数)
function f() {
// 如果当前处于实例化类的阶段,则调用init原型函数
if (!initializing) {
// 如果父类存在,则实例对象的baseprototype指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseclass) {
this.baseprototype = baseclass.prototype;
}
this.init.apply(this, arguments);
}
}
// 如果此类需要从其它类扩展
if (baseclass) {
initializing = true;
f.prototype = new baseclass();
f.prototype.constructor = f;
initializing = false;
}
// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasownproperty(name)) {
// 如果此类继承自父类baseclass并且父类原型中存在同名函数name
if (baseclass &&
typeof (prop[name]) === "function" &&
typeof (f.prototype[name]) === "function") {
// 重定义函数name -
// 首先在函数上下文设置this.base指向父类原型中的同名函数
// 然后调用函数prop[name],返回函数结果
// 注意:这里的自执行函数创建了一个上下文,这个上下文返回另一个函数,
// 此函数中可以应用此上下文中的变量,这就是闭包(closure)。
// 这是javascript框架开发中常用的技巧。
f.prototype[name] = (function(name, fn) {
return function() {
this.base = baseclass.prototype[name];
return fn.apply(this, arguments);
};
})(name, prop[name]);
} else {
f.prototype[name] = prop[name];
}
}
}
return f;
};
此时,创建类与子类以及调用方式都显得非常优雅,请看:
var person = jclass({
init: function(name) {
this.name = name;
},
getname: function() {
return this.name;
}
});
var employee = jclass(person, {
init: function(name, employeeid) {
this.base(name);
this.employeeid = employeeid;
},
getemployeeid: function() {
return this.employeeid;
},
getname: function() {
return "employee name: " + this.base();
}
});
var zhang = new employee("zhangsan", "1234");
console.log(zhang.getname()); // "employee name: zhangsan"
至此,我们已经创建了一个完善的函数jclass, 帮助我们在javascript中以比较优雅的方式实现类和继承。
在以后的章节中,我们会陆续分析网上一些比较流行的javascript类和继承的实现。 不过万变不离其宗,那些实现也无非把我们这章中提到的概念颠来簸去的“炒作”, 为的就是一种更优雅的调用方式。
绿色通道:好文要顶关注我收藏该文与我联系
posted @ 2009-07-09 14:53 三生石上 阅读(5093) 评论(22)编辑 收藏
评论
2268283
回复 引用 查看
#1楼2009-07-09 16:17 | lass_name
学习
回复 引用 查看
#2楼2009-07-09 17:32 | ziqiu.zhang
和"悟透javascript"一书中介绍的很相似. 不知道楼主是否看过此书.博客园系列书籍. 或者也是从这书中学到的?
回复 引用 查看
#3楼[楼主]2009-07-09 21:22 | sanshi
引用ziqiu.zhang:和"悟透javascript"一书中介绍的很相似. 不知道楼主是否看过此书.博客园系列书籍. 或者也是从这书中学到的?
没看过,不过这些知识都是相通的,我只是用自己的语言重新描述了一遍
回复 引用 查看
#4楼2009-07-10 15:38 | 可乐虫
楼主,能把mootools的class给提出来不.
回复 引用 查看
#5楼2009-07-10 15:38 | 可乐虫
楼主,能把mootools的class给提出来不.
回复 引用 查看
#6楼2009-08-24 11:11 | love4j
如何调用父类的同名方法?中的调用方式中的
var employee = jclass(person, {
init: function(name, employeeid) {
// 调用父类的原型函数init,注意使用apply函数修改init的this指向
this.base.init.apply(this, [name]);
this.employeeid = employeeid;
}
[name]是什么意思?为什么用方括号括起来?
回复 引用 查看
#7楼[楼主]2009-08-24 11:15 | sanshi
引用love4j:
如何调用父类的同名方法?中的调用方式中的
var employee = jclass(person, {
init: function(name, employeeid) {
// 调用父类的原型函数init,注意使用apply函数修改init的this指向
this.base.init.apply(this, [name]);
this.employeeid = employeeid;
}
[name]是什么意思?为什么用方括号括起来?
name是ini函数传递过来的第一个参数,用中括号括起来表示这是一个数组,数组中只有一项。这是 apply 函数的语法。
回复 引用 查看
#8楼2009-08-24 14:51 | love4j
三生石上,问一个ext的问题
a=function(config){
this.id=config.id;
}
a.prototype.sayhello=function(){
alert("hello, world!");
}
b=function(config){
this.name=config.name;
}
通过ext的方式让b继承a,b=ext.extend(b,a),这样得到的b没有a的id属性,怎样让b有a的id?
回复 引用 查看
#9楼[楼主]2009-08-24 16:47 | sanshi
引用love4j:
三生石上,问一个ext的问题
a=function(config){
this.id=config.id;
}
a.prototype.sayhello=function(){
alert("hello, world!");
}
b=function(config){
this.name=config.name;
}
通过ext的方式让b继承a,b=ext.extend(b,a),这样得到的b没有a的id属性,怎样让b有a的id?
可以这样写:
a = function(config) {
this.id=config.id;
};
a.prototype.sayhello = function(){
alert("hello, world!");
};
b = ext.extend(a, {
constructor: function(config){
b.superclass.constructor.apply(this, arguments);
this.name=config.name;
}
});
var b = new b({
id: "1002",
name: "zhangsan"
});
alert(b.id);
b.sayhello();
回复 引用 查看
#10楼[楼主]2009-08-24 16:48 | sanshi
a = function(config) {
this.id=config.id;
};
a.prototype.sayhello = function(){
alert("hello, world!");
};
b = ext.extend(a, {
constructor: function(config){
b.superclass.constructor.apply(this, arguments);
this.name=config.name;
}
});
var b = new b({
id: "1002",
name: "zhangsan"
});
alert(b.id);
b.sayhello();
回复 引用
#11楼2009-08-24 17:57 | 归来吧[未注册用户]
sanshi:
帮我看看好吗?为什么呢?
找不到类型或命名空间名称“menucollection”(是否缺少 using 指令或程序集引用?)
// 通过反射获取属性menus
propertyinfo info = btn.gettype().getproperty("menus");
(info.getvalue(btn, null) as menucollection).add(menu);
回复 引用 查看
#12楼[楼主]2009-08-24 21:25 | sanshi
@归来吧
需要使用命名空间前缀:extaspnet.menucollection
回复 引用
#13楼2009-08-24 22:28 | 归来吧[未注册用户]
extaspnet没有menucollection呀,我用的最新v2.0.6
回复 引用 查看
#14楼[楼主]2009-08-24 22:34 | sanshi
引用归来吧:extaspnet没有menucollection呀,我用的最新v2.0.6
绝对有的哦,源代码在:extaspnet\webcontrols\component.menu\menucollection.cs
不信你自己看下
回复 引用
#15楼2009-08-24 22:49 | 归来吧[未注册用户]
谢谢,知道了,在extaspnet_v2.0.6_dll 里面没有,是不是要自己生成一个
回复 引用 查看
#16楼[楼主]2009-08-25 08:46 | sanshi
引用归来吧:谢谢,知道了,在extaspnet_v2.0.6_dll 里面没有,是不是要自己生成一个
我刚才看了一下,貌似v2.0.6中的确没有menucollection,好奇怪。
你可以从 http://extaspnet.codeplex.com/sourcecontrol/listdownloadablecommits.aspx 下载最新源代码,然后自己编译一下用。
回复 引用 查看
#17楼2009-08-26 11:57 | love4j
@sanshi
引用sanshi:
引用love4j:
三生石上,问一个ext的问题
a=function(config){
this.id=config.id;
}
a.prototype.sayhello=function(){
alert("hello, world!");
}
b=function(config){
this.name=config.name;
}
通过ext的方式让b继承a,b=ext.extend(b,a),这样得到的b没有a的id属性,怎样让b有a的id?
可以这样写:
a = function(config) {
this.id=c...
首先,谢谢三石的耐心解答,还有点疑问:
b = ext.extend(a, {
constructor: function(config){
b.superclass.constructor.apply(this, arguments);
this.name=config.name;
}
});
换成“call”可以吗?该怎样写呢?
回复 引用 查看
#18楼2009-08-26 12:10 | love4j
三石,我试出来了,不过不太明白
b=ext.extend(a,{
constructor:function(config){
b.superclass.constructor.call(this,config);
this.name=config.name;
}
});
为什么用下边的写法不行?有什么区别?
b=ext.extend(a,{
constructor:function(config){
b.superclass.constructor.call(this,arguments);
this.name=config.name;
}
});
回复 引用 查看
#19楼[楼主]2009-08-26 12:20 | sanshi
@love4j
arguments是一个伪数组。而 apply 要求第二个参数是数组, call 要求第二个参数是对象。
在上个例子中 arguments == [config]
你可以参考关于apply和call的文档:
https://developer.mozilla.org/en/core_javascript_1.5_reference/global_objects/function/apply
https://developer.mozilla.org/en/core_javascript_1.5_reference/global_objects/function/call
回复 引用 查看
#20楼2009-08-27 21:32 | love4j
// 重定义函数name -
// 首先在函数上下文设置this.base指向父类原型中的同名函数
// 然后调用函数prop[name],返回函数结果
// 注意:这里的自执行函数创建了一个上下文,这个上下文返回另一个函数,
// 此函数中可以应用此上下文中的变量,这就是闭包(closure)。
------===================================-------
这里的“此上下文中的变量”在该程序中指“baseclass”
------===================================-------
// 这是javascript框架开发中常用的技巧。
回复 引用 查看
#21楼2010-02-28 12:35 | love_javascript
研究了一整天。
最后优化jclass中,baseprototype出现了,但是后面代码中怎么没有利用到它的地方?或者出现过?
回复 引用
#22楼2011-12-12 17:10 | 上海-小鬼[未注册用户]
楼主您好?
在优化jclass段中,对于覆盖父类的同名函数
f.prototype[name] = (function(name, fn) {
return function() {
this.base = baseclass.prototype[name];
return fn.apply(this, arguments);
};
})(name, prop[name]);
这一段不理解,特别是return fn.apply(this, arguments)。 能解下惑吗?谢谢;
发表评论
昵称: [登录]
主页:
邮箱:(仅博主可见)
验证码:看不清。
换一个
评论内容:
记住我的昵称和主页
-->
[使用ctrl+enter键快速提交评论]
0
1519890
6hxukmzjkok=
最新it新闻:
» 更多新闻...
最新知识库文章:
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
