JavaScript中的继承和原型

JavaScript是基于原型的面向对象语言,没有类的概念,我们先来说说原型prototype。

       每个对象都有原型,原型是一种对象,修改对象的原型,可以影响所有由本对象派生的对象,但是如果仅仅修改本对象,并不会影响已经创建的实例的原型。因为 每个对象和原型都有一个原型,对象的原型指向对象的父原型,而父原型又指向父原型的父原型,这种通过原型层层连接起来的关系称为原型链,这条链的末端一般 总是默认的对象原型。

原型中读的是从原型链上读,写是往自己里面写

  1. <script type="text/javascript">            function load() {  
  2.                     function obj1() {//对象obj1  
  3.                     }  
  4.                     function obj2() {//对象obj2  
  5.                     }  
  6.                     obj2.prototype = new obj1(); //obj1赋值给obj2的原型  
  7.                     Object.prototype.foo = function () {  
  8.                             alert("object"); //Object对象foo函数弹出object  
  9.                     }  
  10.                     testobj = new obj2(); //obj2赋值给测试对象testobj  
  11.                     testobj.foo(); //执行测试对象的foo函数  
  12.                     obj1.prototype.foo = function () {  
  13.                             alert("obj1"); //对obj1的原型函数foo重新赋值  
  14.                     }  
  15.                     testobj.foo(); //在此执行测试对象的foo函数  
  16.             }  
  17.             window.onload = load;  
  18. </script>  

运行结果:


结果分析:

我们先创建了对象obj1和obj2,把obj1的原型赋值给obj2,再 Object的原型中添加函数foo显示‘Object’,再把obj2赋值给测试对象testobj,执行testobj中的foo,我们发现实际执行 的是Object中的foo,为什么?因为读取的时候,一次从testobj---obj2---obj1---Object读取,直到Object方能 读取到foo,所以说读是从原型链从浅入深读取。然后我们修改obj1的原型,使之也有foo函数,再次执行testobj的foo,我们发现实际执行的 是obj1的foo,可见对obj1写foo的时候是直接写到自己的原型上的。如图:


继承是简单的复制

  1. <script type="text/javascript">            function load() {  
  2.                    var father = new Object();//创建父对象  
  3.                    var son = new Object();//创建子对象  
  4.                    father.name = function () {  
  5.                            alert('dad');//弹出dad  
  6.                    }  
  7.                    son.name = function () {  
  8.                            alert('son');//弹出son  
  9.                    }  
  10.                    son.name = father.name; //把父对象的姓名赋值给子对象  
  11.                    father.name = function () {  
  12.                            alert('new dad'); //覆写父对象姓名为new dad  
  13.                    }  
  14.                    father.name(); //弹出父对象的姓名  
  15.                    son.name();//弹出子对象的姓名  
  16.            }  
  17.            window.onload = load;//把load函数添加到页面加载上  
  18.    </script>  

运行结果:


结果分析:

我们创建父对象father和子对象son,定义father的name为 “dad”,son的name为“son”,再把father的name赋值给son,重新定义father的name为“new dad”。执行father的name,显示为“new dad”,这个在我们意料之中;而执行son的name却是“dad”而非“new dad”,可见继承属性,仅仅是复制父对象的属性,而不是引用。

        用了两个简单的实例说明了一下javascript中的原型和继承,对于其更深层次的原型链和构造器,因为所学有限,等待以后的补充学习后继续讨论。

posted @ 2014-07-27 08:59  阳光小屋  阅读(120)  评论(0编辑  收藏  举报