javascript继承的原理


几种方案

  1.如图:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 进度条 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="text/html">
<META NAME="Description" CONTENT="有关windows中进度条的实现">
<style type="text/css">
#out{width:300px;height:20px;background:#EEE;}
#in{width:10px; height:20px;background:#778899;color:white;text-align:center;}
#font_color{background:yellow;text-align:center;color:white;}
</style>
</HEAD>
<BODY onload="start();" >
<div id='out'>
<div id="in" style="width:10%">10%</div>
<div>
<script type="text/javascript">
i=0;
function start()
{
ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量,一个间隔数值.这个数值是表示调用setInterval的次数
}
function begin()
{
i+=1;
if(i<=100)
{
document.getElementById("in").style.width=i+"%";
document.getElementById("in").innerHTML=i+"%";}
else
{
clearInterval(ba);
document.getElementById("out").style.display="none";
document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>");
}
}
</script>
</BODY>
</HTML>

通过对javascript的几种函数的运行分析,得出结论:

  javascript 的继承实际上是通过对对象进行初始化来模拟的。

  代码一:实现继承的一种方法

<script language="javascript" type="text/livescript">
function Person()
{
  this.say=function(){alert("Name")};
}
function PersonA()
{
  this.say=function(){alert("windowSay");};
}
PersonA();//对window对象添加方法
window.say();//显示windowSay
var Me={};
Person.call(Me);
Me.say();//输出结果为Name,可以得出Me通过Person.call(Me)“继承”了say方法
</script>

对比:

<script language="javascript" type="text/livescript">
function Person()
{
  
}
Person.say=function(){alert("Name")};
var Me={};
Person.call(Me);
//Me.say();//输出object doesn't support this method or property!我们可以看到Me并没有“继承”Person的say方法
</script>

  为什么呢?

  原因是第一种方法执行Person.call(Me)时,将Person里的this指定为Me,然后执行Person方法里的代码

  显而易见,this.say=function(){alert("Name")};这句话对Me添加了方法。让Me对象具有了say的行为。

  而PersonA();时,要执行PersonA里面的代码,此时this对象代表window,所以window获得了say行为。

  而第二种方法执行Person内部的代码,所以并没有给Me添加行为,调用Me.say()自然出错。

  如此看来通过Call,Apply,for(property in object),prototype等方法实现继承时,只是一种模拟继承的

  方式。具体过程就是对一个对象动态添加函数,属性。

  Person.call(Me);是对Me添加Person的属性方法,哪么function Person(){alert("Name");}面对的对象是谁呢?

  我们通过例子来说明

<script language="javascript" type="text/livescript">
window.name="Window";
function Person()
{
  alert(this.name);
}
window.Person();//显示Window
Person();//显示Window
</script>

  可见我们定义在script标签里的函数实际上是对window对象的操作,我们给window对象添加了方法和属性

  我们再来看看

<script language="javascript" type="text/livescript">
function Person(thing)
{
  this.say=function(){alert(thing);};
}
var Me={};
Person.call(Me,"thing");
Me.say();//输出thing
window.Me.say();//输出thing
//window.Person.say("Person");//输出object doesn't support this method or property!
</script>

  我们可以看到对象Me定义在script标签内,也是window对象的一个变量,同时它又通过call获得了say方法的copy

  而Person作为方法,虽然在其内定义了一个say方法,而Person并没有得到say的copy,要想让Person能say哪么可以

  new Person(),或者Person.call(Person)。new的过程就是将Person内的this设为Person并且添加行为的过程。

  如下:

<script language="javascript" type="text/livescript">
function Person(thing)
{
  this.say=function(){alert(thing);};
}
var Me={};
Person.call(Me,"thing");
Me.say();//输出thing
window.Me.say();//输出thing
Person.call(Person,"person");
Person.say();//输出person
window.Person.say();//输出person
var p=new Person("person");
p.say();//输出person
window.Person.say("Person");//输出person
</script>


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3