创建Animal对象
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; }; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; var a = new Animal("蓬松的尾巴"); a.happy(); var b = new Animal("长尾巴"); b.happy(); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
创建Person对象,继承Animal
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; }; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ this.name = name; }; Person.prototype=new Animal(); var p = new Person("大漠穷秋"); alert(p.tail); alert(p.name); p.happy(); p.eat(); p.run(); p.fight(); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
删除Person的tail属性
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; }; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ this.name = name; }; Person.prototype=new Animal(); delete Person.prototype.tail; var p = new Person("大漠穷秋"); alert(p.tail); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
重置constructor
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; }; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ this.name = name; }; Person.prototype=new Animal(); delete Person.prototype.tail; Person.prototype.constructor=Person; var p = new Person("大漠穷秋"); alert(p.constructor); alert(p.constructor==Person); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
对象冒充
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; }; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ Animal.call(this); this.name = name; delete this.tail; }; var p = new Person("大漠穷秋"); alert(p.name); alert(p.tail); p.happy(); p.eat(); p.run(); p.fight(); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
静态属性, undefined是正常的。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; Animal.instanceCounter++; }; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ Person.superclass.call(this); this.name = name; }; Person.superclass = Animal; var p1 = new Person("大漠穷秋"); alert(Person.instanceCounter); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; Animal.instanceCounter++; }; Animal.instanceCounter=0; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ Person.superclass.call(this); this.name = name; for(var p in Animal){ //不能拷贝父类的prototype上的属性 Person[p] = Animal[p]; } }; Person.superclass = Animal; var p1 = new Person("大漠穷秋"); var p2 = new Person("小秋"); alert(Person.instanceCounter); //不能拷贝父类的prototype上的属性 p1.happy(); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
原型继承:可以把父类prototype上的属性全部继承下来,而且利用内建的原型查找机制,子类的运行效率会比较高。但是,原型继承不能“继承”父类的静态属性。
对象冒充:可以继承通过this赋值的属性,配合上for...in循环的处理还可以“继承”父类的静态属性。但是,不能继承父类中通过prototype设置的属性。
对象冒充和原型继承综合运用
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; Animal.instanceCounter++; }; Animal.instanceCounter=0; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ //对象冒充,并删除不需要的属性 Person.superclass.call(this); delete this.tail; this.name = name; //拷贝父类的静态属性 for(var p in Animal){ Person[p] = Animal[p]; } }; Person.superclass = Animal; //原型继承并删除不需要的方法 var F = function(){}; F.prototype=Animal.prototype; delete F.prototype.fight; Person.prototype = new F(); Person.prototype.constructor=Person; var p1 = new Person("大漠穷秋"); alert(Person.instanceCounter); alert(p1.tail); alert(p1.name); p1.eat(); p1.fight(); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
覆盖prototype上的方法
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<html> <head> <title>11</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8"> <script type="text/javascript"> Animal = function(tail){ this.tail = tail || "动物的尾巴"; Animal.instanceCounter++; }; Animal.instanceCounter=0; Animal.prototype={ happy:function(){ alert("摇动 > " + this.tail); }, eat:function(){ alert("动物吃生的"); }, run:function(){ alert("动物四条腿跑"); }, fight:function(){ alert("动物往死里打"); } }; Animal.prototype.constructor=Animal; Person = function(name){ //对象冒充,并删除不需要的属性 Person.superclass.call(this); delete this.tail; this.name = name; //拷贝父类的静态属性 for(var p in Animal){ Person[p] = Animal[p]; } }; Person.superclass = Animal; //原型继承并删除不需要的方法 var F = function(){}; F.prototype=Animal.prototype; delete F.prototype.fight; F.prototype.eat = function(){ alert("人类吃熟的"); }; /** 需要覆盖多个方法时使用Ext的apply Ext.apply(F.ptototype, { eat:function(){ alert("人类吃熟的"); } }); **/ Person.prototype = new F(); Person.prototype.constructor=Person; var p1 = new Person("大漠穷秋"); p1.eat(); var init = function(){}; </script> </head> <body onload="init();"> </body> </html>
--