前几天做了一个
JScript版的CollecionBase类
,用来解决需要使用集合作为主要数据结构的类的基类。不过当时挺忙的没有给出继承的示例,搞得有的网友对JavaScript继承比较迷惑,于是今天使用四种方式来分别实现了4个ArrayList派生类。
关于使用JavaScript进行面向对象编程(OOP),网上已有很多的文章说过了。这里我推荐两篇文章大家看看,如果没有理解怎么使用JavaScript的Function对象的prototype属性来实现类定义及其原理,那么就仔细看看' 面向对象的JavaScript编程 '、' 面向对象的Jscript '和' Classical Inheritance in JavaScript '哦(特别是第一篇及其相关讨论的文章),否则后面一头雾水不能怪我啦
。
那个CollectionBase就不列了,第一个链接就是它了,下面是用四种方法实现的JavaScript'继承'(以后就不打引号了,反正知道JavaScript的继承不是经典OO里的继承就行了):
构造继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="javascript">
function ArrayList01()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
this.base = CollectionBase;
this.base();
this.m_Array = this.m_InnerArray;
this.foo = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
document.write(this + ': ' + this.m_Count + ': ' + this.m_Array + '<br />');
};
this.Add = function(item)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.InsertAt(item, this.m_Count);
};
this.InsertAt = function(item, index)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.m_InnerArray.splice(index, 0, item);
this.m_Count++;
};
this.toString = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return '[class ArrayList01]';
};
}
</script>
原形继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="JavaScript">
function ArrayList02()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
this.InsertAt = function(item, index)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.m_InnerArray.splice(index, 0, item);
this.m_Count++;
};
this.m_Array = this.m_InnerArray;
this.toString = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return '[class ArrayList02]';
};
}
ArrayList02.prototype = new CollectionBase();
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
ArrayList02.prototype.foo = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
document.write(this + ': ' + this.m_Count + ': ' + this.m_Array + '<br />');
};
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
ArrayList02.prototype.InsertAt = function(item, index)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
this.m_InnerArray.splice(index, 0, item);
this.m_Count++;
};
</script>
实例继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="javascript">
function ArrayList03()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var base = new CollectionBase();
base.m_Array = base.m_InnerArray;
base.foo = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
document.write(this + ': '+ this.m_Count + ': ' + this.m_Array + '<br />');
};
base.InsertAt = function(item, index)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.m_InnerArray.splice(index, 0, item);
this.m_Count++;
};
base.toString = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return '[class ArrayList03]';
};
return base;
}
</script>
附加继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="JavaScript">
function ArrayList04()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
this.base = new CollectionBase();
for ( var key in this.base )
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if ( !this[key] )
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this[key] = this.base[key];
}
}
this.m_Array = this.m_InnerArray;
this.InsertAt = function(item, index)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.m_InnerArray.splice(index, 0, item);
this.m_Count++;
};
}
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
ArrayList04.prototype.foo = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
document.write(this + ': ' + this.m_Count + ': ' + this.m_Array + '<br />');
}
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
ArrayList04.prototype.toString = function()
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
return '[class ArrayList04]';
}
</script>
关于使用JavaScript进行面向对象编程(OOP),网上已有很多的文章说过了。这里我推荐两篇文章大家看看,如果没有理解怎么使用JavaScript的Function对象的prototype属性来实现类定义及其原理,那么就仔细看看' 面向对象的JavaScript编程 '、' 面向对象的Jscript '和' Classical Inheritance in JavaScript '哦(特别是第一篇及其相关讨论的文章),否则后面一头雾水不能怪我啦
![](http://download.cnblogs.com/Emoticons/emwink.gif)
那个CollectionBase就不列了,第一个链接就是它了,下面是用四种方法实现的JavaScript'继承'(以后就不打引号了,反正知道JavaScript的继承不是经典OO里的继承就行了):
构造继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/None.gif)
原形继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/None.gif)
实例继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/None.gif)
附加继承法:
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](http://download.cnblogs.com/Images/dot.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://download.cnblogs.com/Images/OutliningIndicators/None.gif)
派生类中的foo是一个新增加的函数,用来输出类的类型和m_InnerArray里的数据。toString()相当于override了CollectionBase中的toString(),不过其实就是赋值覆盖,和'从JavaScript函数重名看其初始化方式'一文中说到的原理是一样的。这个四种方法的原理和区别我稍候再作分析...
未完