Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung der Anwendungsbeispiele mehrerer JavaScript-Simulationen, die die Vererbung unterstützen

伊谢尔伦
Freigeben: 2017-07-24 15:04:28
Original
1035 Leute haben es durchsucht

In JavaScript wird die Vererbung nicht direkt von Methoden unterstützt. Simulationsmethoden können in vier Typen zusammengefasst werden: Konstruktionsvererbung, Prototypenvererbung, Instanzvererbung und Kopievererbung. Nachdem Sie es gemeistert haben, gibt es auch die gemischte Fortsetzungsmethode. Was ist diese Methode? Wählen Sie einige der vorherigen vier aus und mischen Sie sie 🎜>Beispiel für eine prototypische Vererbungsmethode:

Beispiel für eine Instanzvererbung:
//定义一个Collection类型 
function Collection(size) 
{ 
this.size = function(){return size}; //公有方法,可以被继承 
} 
Collection.prototype.isEmpty = function(){ //静态方法,不能被继承 
return this.size() == 0; 
} 
//定义一个ArrayList类型,它"继承"Collection类型 
function ArrayList() 
{ 
var m_elements = []; //私有成员,不能被继承 
m_elements = Array.apply(m_elements, arguments); 
//ArrayList类型继承Collection 
this.base = Collection; 
this.base.call(this, m_elements.length); 
this.add = function() 
{ 
return m_elements.push.apply(m_elements, arguments); 
} 
this.toArray = function() 
{ 
return m_elements; 
} 
} 
ArrayList.prototype.toString = function() 
{ 
return this.toArray().toString(); 
} 
//定义一个SortedList类型,它继承ArrayList类型 
function SortedList() 
{ 
//SortedList类型继承ArrayList 
this.base = ArrayList; 
this.base.apply(this, arguments); 
this.sort = function() 
{ 
var arr = this.toArray(); 
arr.sort.apply(arr, arguments); 
} 
} 
//构造一个ArrayList 
var a = new ArrayList(1,2,3); 
dwn(a); 
dwn(a.size()); //a从Collection继承了size()方法 
dwn(a.isEmpty); //但是a没有继承到isEmpty()方法 
//构造一个SortedList 
var b = new SortedList(3,1,2); 
b.add(4,0); //b 从ArrayList继承了add()方法 
dwn(b.toArray()); //b 从ArrayList继承了toArray()方法 
b.sort(); //b 自己实现的sort()方法 
dwn(b.toArray()); 
dwn(b); 
dwn(b.size()); //b从Collection继承了size()方法
Nach dem Login kopieren
Bevor wir über dieses Beispiel sprechen, sprechen wir wie folgt über die Einschränkungen der Konstruktionsvererbung:

//定义一个Point类型 
function Point(dimension) 
{ 
this.dimension = dimension; 
} 
//定义一个Point2D类型,"继承"Point类型 
function Point2D(x, y) 
{ 
this.x = x; 
this.y = y; 
} 
Point2D.prototype.distance = function() 
{ 
return Math.sqrt(this.x * this.x + this.y * this.y); 
} 
Point2D.prototype = new Point(2); //Point2D继承了Point 
//定义一个Point3D类型,也继承Point类型 
function Point3D(x, y, z) 
{ 
this.x = x; 
this.y = y; 
this.z = z; 
} 
Point3D.prototype = new Point(3); //Point3D也继承了Point 
//构造一个Point2D对象 
var p1 = new Point2D(0,0); 
//构造一个Point3D对象 
var p2 = new Point3D(0,1,2); 
dwn(p1.dimension); 
dwn(p2.dimension); 
dwn(p1 instanceof Point2D); //p1 是一个 Point2D 
dwn(p1 instanceof Point); //p1 也是一个 Point 
dwn(p2 instanceof Point); //p2 是一个Point
Nach dem Login kopieren
Einige Methoden von Kernobjekten können nicht durch Konstruktion geerbt werden. Der Grund dafür ist, dass das Kernobjekt im Konstruktor keine Zuweisungs- oder Initialisierungsvorgänge ausführt, wie es bei unseren benutzerdefinierten allgemeinen Objekten der Fall ist. , wie folgt:


Wechseln Sie nun zur Instanzvererbung:
function MyDate() 
{ 
this.base = Date; 
this.base.apply(this, arguments); 
} 
var date = new MyDate(); 
alert(date.toGMTString); //undefined,date并没有继承到Date类型,所以没有toGMTString方法
Nach dem Login kopieren

function MyDate(){} 
MyDate.prototype=new Date(); 
var date=new MyDate(); 
alert(date.toGMTString); //'[object]'不是日期对象,仍然没有继承到Date类型!
Nach dem Login kopieren

Vererbungsbeispiel kopieren:

function MyDate() 
{ 
var instance = new Date(); //instance是一个新创建的日期对象 
instance.printDate = function(){ 
document.write("<p> "+instance.toLocaleString()+"</p> "); 
} //对instance扩展printDate()方法 
return instance; //将instance作为构造函数的返回值返回 
} 
var myDate = new MyDate(); 
dwn(myDate.toGMTString()); //这回成功输出了正确的时间字符串,看来myDate已经是一个Date的实例
了,继承成功
myDate.printDate(); //如果没有return instance,将不能以下标访问,因为是私有对象的方法
Nach dem Login kopieren

Gemischte Vererbung Beispiel:

Das obige ist der detaillierte Inhalt vonZusammenfassung der Anwendungsbeispiele mehrerer JavaScript-Simulationen, die die Vererbung unterstützen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage