Heim > Web-Frontend > js-Tutorial > Hauptteil

5 Möglichkeiten zur Implementierung der Vererbung in js_javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:28:28
Original
960 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben 5 Möglichkeiten zur Implementierung der Vererbung in js. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Der erste Weg der Vererbung: Objektidentität

function Parent(username){
  this.username = username;
  this.hello = function(){
   alert(this.username);
  }
}
function Child(username,password){
  //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承
  //第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象,
  //第二步:执行this.method方法,即执行Parent所指向的对象函数
  //第三步:销毁this.method属性,即此时Child就已经拥有了Parent的所有属性和方法 
  this.method = Parent;
  this.method(username);//最关键的一行
  delete this.method;
  this.password = password;
  this.world = function(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

Nach dem Login kopieren

2. Die zweite Art der Vererbung: call()-Methode

Die Aufrufmethode ist eine Methode in der Funktionsklasse
Der Wert des ersten Parameters der Aufrufmethode wird diesem
zugewiesen, der in der Klasse (d. h. Methode) erscheint. Der zweite Parameter der Aufrufmethode wird den von der Klasse (d. h. der Methode) akzeptierten Parametern zugewiesen

function test(str){
  alert(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
test.call(object,"langsin");//此时,第一个参数值object传递给了test类(即方法)中出现的this,而第二个参数"langsin"则赋值给了test类(即方法)的str
function Parent(username){
  this.username = username;
  this.hello = function(){
   alert(this.username);
  }
}
function Child(username,password){
  Parent.call(this,username);
  this.password = password;
  this.world = function(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

Nach dem Login kopieren

3. Die dritte Art der Vererbung: apply()-Methode

Die Apply-Methode akzeptiert 2 Parameter,
A. Der erste Parameter ist derselbe wie der erste Parameter der Aufrufmethode, dh er wird diesem
zugewiesen, der in der Klasse (dh der Methode) erscheint. B. Der zweite Parameter ist ein Array-Typ. Jedes Element in diesem Array wird der Reihe nach dem von der Klasse (d. h. der Methode) akzeptierten Parameter

zugewiesen.
function Parent(username){ 
  this.username = username; 
  this.hello = function(){ 
   alert(this.username); 
  } 
} 
function Child(username,password){ 
  Parent.apply(this,new Array(username)); 
  this.password = password; 
  this.world = function(){ 
   alert(this.password); 
  } 
} 
var parent = new Parent("zhangsan"); 
var child = new Child("lisi","123456"); 
parent.hello(); 
child.hello(); 
child.world(); 
Nach dem Login kopieren

4. Die vierte Art der Vererbung: Prototypkettenmethode , das heißt, die Unterklasse verwendet den Prototyp, um alle durch den Prototyp in der übergeordneten Klasse hinzugefügten Attribute und Methoden an die untergeordnete Klasse anzuhängen und so die Vererbung zu realisieren

function Person(){ 
} 
Person.prototype.hello = "hello"; 
Person.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(){ 
} 
Child.prototype = new Person();//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承 
Child.prototype.world = "world"; 
Child.prototype.sayWorld = function(){ 
  alert(this.world); 
} 
var c = new Child(); 
c.sayHello(); 
c.sayWorld(); 

Nach dem Login kopieren

5. Der fünfte Weg der Vererbung: gemischte Methode

Gemischte Aufrufmethode und Prototypkettenmethode

function Parent(hello){ 
  this.hello = hello; 
} 
Parent.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(hello,world){ 
  Parent.call(this,hello);//将父类的属性继承过来 
  this.world = world;//新增一些属性 
} 
Child.prototype = new Parent();//将父类的方法继承过来 
Child.prototype.sayWorld = function(){//新增一些方法 
  alert(this.world); 
} 
var c = new Child("zhangsan","lisi"); 
c.sayHello(); 
c.sayWorld();

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

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