Heim > Web-Frontend > js-Tutorial > Hauptteil

Teilen Sie Beispiele für 5 Möglichkeiten zur Implementierung der Vererbung in js

小云云
Freigeben: 2018-02-27 15:07:55
Original
1078 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele für 5 Möglichkeiten zur Implementierung der Vererbung in js vorgestellt, in der Hoffnung, Ihnen dabei zu helfen, die Implementierung der js-Vererbung besser zu verstehen.

1. Die erste Art der Vererbung: Objektidentität

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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
1

2


3

4

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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
<🎜>5<🎜><🎜>6<🎜><🎜>7<🎜><🎜>8 <🎜><🎜>9<🎜><🎜>10<🎜><🎜>11<🎜><🎜>12<🎜><🎜>13<🎜><🎜>14<🎜><🎜>15< 🎜><🎜>16<🎜><🎜>17<🎜><🎜>18<🎜><🎜>19<🎜><🎜>20<🎜><🎜>21<🎜><🎜>22<🎜 ><🎜>23<🎜><🎜>24<🎜>
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
Nach dem Login kopieren
<🎜>2. Die zweite Art der Vererbung: call()-Methode <🎜><🎜>Die Aufrufmethode ist Methoden in der Funktionsklasse <🎜>Der Wert des ersten Parameters der Aufrufmethode wird diesem zugewiesen, der in der Klasse erscheint (d. h. Methode). <🎜>Der zweite Parameter der Aufrufmethode wird der Reihe nach zugewiesen Von der Klasse akzeptierte Werte (d. h. Methode). Parameter<🎜>
<🎜>1<🎜 ><🎜>2<🎜><🎜>3 <🎜><🎜>4<🎜><🎜>5<🎜><🎜>6<🎜><🎜>7<🎜><🎜>8<🎜> <🎜>9<🎜><🎜>10< 🎜><🎜>11<🎜><🎜>12<🎜><🎜>13<🎜><🎜>14<🎜><🎜>15<🎜>< 🎜>16<🎜><🎜>17<🎜 ><🎜>18<🎜><🎜>19<🎜><🎜>20<🎜><🎜>21<🎜><🎜>22<🎜><🎜 >23<🎜><🎜>24<🎜>
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
Nach dem Login kopieren

3、继承的第三种方式:apply()方法方式

apply方法接受2个参数,
A、第一个参数与call方法的第一个参数一样,即赋值给类(即方法)中出现的this
B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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
Nach dem Login kopieren

4、继承的第四种方式:原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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
Nach dem Login kopieren

5、继承的第五种方式:混合方式

混合了call方式、原型链方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

希望本文所述对大家JavaScript程序设计有所帮助。

相关推荐:

学习javascript面向对象 javascript实现继承的方式_javascript技巧

js面向对象之继承知识详解

JavaScript实现多重继承实例详解

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für 5 Möglichkeiten zur Implementierung der Vererbung in js. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!