《ext江湖》第8章继承-代码片段
生活随笔
收集整理的這篇文章主要介紹了
《ext江湖》第8章继承-代码片段
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
?創(chuàng)建Animal對象
<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> View Code?
創(chuàng)建Person對象，繼承Animal
<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> View Code?
刪除Person的tail屬性
<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> View Code?
重置constructor
<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> View Code?
對象冒充
<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> View Code?
靜態(tài)屬性, undefined是正常的。
<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> View Code <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> View Code?原型繼承：可以把父類prototype上的屬性全部繼承下來，而且利用內(nèi)建的原型查找機制，子類的運行效率會比較高。但是，原型繼承不能“繼承”父類的靜態(tài)屬性。
對象冒充：可以繼承通過this賦值的屬性，配合上for...in循環(huán)的處理還可以“繼承”父類的靜態(tài)屬性。但是，不能繼承父類中通過prototype設置的屬性。
?
?對象冒充和原型繼承綜合運用
<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;//拷貝父類的靜態(tài)屬性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> View Code?
覆蓋prototype上的方法
<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;//拷貝父類的靜態(tài)屬性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的applyExt.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> View Code?
?
?
?
?
?
?
?
?
--
?
轉(zhuǎn)載于:https://www.cnblogs.com/juedui0769/p/4122131.html
總結(jié)
以上是生活随笔為你收集整理的《ext江湖》第8章继承-代码片段的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 垂直居中重要方法理解---重点是方法三
- 下一篇： CSS padding