javascript继承的原理

本文通过实例分析JavaScript中的继承机制,揭示了其实现的本质是通过对象初始化模拟。探讨了使用Call、Apply等方法实现继承的具体过程。
None.gif通过对javascript的几种函数的运行分析,得出结论:
None.gifjavascript 的继承实际上是通过对对象进行初始化来模拟的。
None.gif代码一:实现继承的一种方法
None.gif
<script language="javascript" type="text/livescript">
None.giffunction Person()
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
this.say=function()dot.gif{alert("Name")};
ExpandedBlockEnd.gif}

None.giffunction PersonA()
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
this.say=function()dot.gif{alert("windowSay");};
ExpandedBlockEnd.gif}

None.gifPersonA();
//对window对象添加方法
None.gif
window.say();//显示windowSay
ExpandedBlockStart.gifContractedBlock.gif
var Me=dot.gif{};
None.gifPerson.call(Me);
None.gifMe.say();
//输出结果为Name,可以得出Me通过Person.call(Me)“继承”了say方法
None.gif
</script>
None.gif对比:
None.gif
<script language="javascript" type="text/livescript">
None.giffunction Person()
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif    
ExpandedBlockEnd.gif}

ExpandedBlockStart.gifContractedBlock.gifPerson.say
=function()dot.gif{alert("Name")};
ExpandedBlockStart.gifContractedBlock.gifvar Me
=dot.gif{};
None.gifPerson.call(Me);
None.gif
//Me.say();//输出object doesn't support this method or property!我们可以看到Me并没有“继承”Person的say方法
None.gif
</script>
None.gif为什么呢?
None.gif原因是第一种方法执行Person.call(Me)时,将Person里的this指定为Me,然后执行Person方法里的代码
ExpandedBlockStart.gifContractedBlock.gif显而易见,
this.say=function()dot.gif{alert("Name")};这句话对Me添加了方法。让Me对象具有了say的行为。
None.gif而PersonA();时,要执行PersonA里面的代码,此时this对象代表window,所以window获得了say行为。
None.gif而第二种方法执行Person内部的代码,所以并没有给Me添加行为,调用Me.say()自然出错。
None.gif
None.gif如此看来通过Call,Apply,
for(property in object),prototype等方法实现继承时,只是一种模拟继承的
None.gif方式。具体过程就是对一个对象动态添加函数,属性。
None.gif
ExpandedBlockStart.gifContractedBlock.gifPerson.call(Me);是对Me添加Person的属性方法,哪么function Person()
dot.gif{alert("Name");}面对的对象是谁呢?
None.gif我们通过例子来说明
None.gif
<script language="javascript" type="text/livescript">
None.gifwindow.name
="Window";
None.giffunction Person()
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif    alert(
this.name); 
ExpandedBlockEnd.gif}

None.gifwindow.Person();
//显示Window
None.gif
Person();//显示Window
None.gif
</script>
None.gif可见我们定义在script标签里的函数实际上是对window对象的操作,我们给window对象添加了方法和属性
None.gif
None.gif我们再来看看
None.gif
<script language="javascript" type="text/livescript">
None.giffunction Person(thing)
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
this.say=function()dot.gif{alert(thing);};
ExpandedBlockEnd.gif}

ExpandedBlockStart.gifContractedBlock.gifvar Me
=dot.gif{};
None.gifPerson.call(Me,
"thing");
None.gifMe.say();
//输出thing 
None.gif
window.Me.say();//输出thing
None.gif
//window.Person.say("Person");//输出object doesn't support this method or property!
None.gif
</script>
None.gif我们可以看到对象Me定义在script标签内,也是window对象的一个变量,同时它又通过call获得了say方法的copy
None.gif而Person作为方法,虽然在其内定义了一个say方法,而Person并没有得到say的copy,要想让Person能say哪么可以
None.gif
new Person(),或者Person.call(Person)。new的过程就是将Person内的this设为Person并且添加行为的过程。
None.gif如下:
None.gif
<script language="javascript" type="text/livescript">
None.giffunction Person(thing)
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
this.say=function()dot.gif{alert(thing);};
ExpandedBlockEnd.gif}

ExpandedBlockStart.gifContractedBlock.gifvar Me
=dot.gif{};
None.gifPerson.call(Me,
"thing");
None.gifMe.say();
//输出thing 
None.gif
window.Me.say();//输出thing
None.gif
Person.call(Person,"person");
None.gifPerson.say();
//输出person
None.gif
window.Person.say();//输出person
None.gif
var p=new Person("person");
None.gifp.say();
//输出person
None.gif
window.Person.say("Person");//输出person
None.gif
</script>


原创文章,转载请注明出处!
All CopyRight Reserved !

 

主页:http://jingtao.cnblogs.com

QQ:307073463
Email:jingtaodeemail@qq.com
MSN:sunjingtao@live.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值