首页 > 代码库 > javascript中的继承

javascript中的继承

2024-10-18 22:44:02   210人阅读

  • 第一种方式: 对象冒充方式

可以实现多继承，但是不推荐使用这种方式。

因为当父类A中有方法sayHello,父类B中也有sayHello方法时，之类继承过程中两个父类的sayHello会产生覆盖。

 

<!DOCTYPE html> <html> <head> <script type="text/javascript"> //继承第一种方式:对象冒充 //Child对象this,冒充Parent对象的this var Parent=function(username){     this.username=username;     this.sayHello=function(){         alert(this.username);     } }var Child=function(username,password){     //这三行代码是对象冒充的关键!!     this.method=Parent;     this.method(username);     delete this.method;         this.password=password;     this.sayWorld=function(){         alert(this.password);     } }var parent=new Parent("zhangsan");var child=new Child("lisi","1234");//Parent只有一个方法 parent.sayHello();//Child有两个方法 child.sayHello(); child.sayWorld();</script> </head>         <body> </body> </html>

 

  • 第二种方式: call方法方式

call方法是定义在Function对象中的方法，所以任意方法都可以调用call。

call方法的第1个参数会被传递给函数中的this，从第2个参数开始，逐一赋值给函数的参数。

    • call方法 
<!DOCTYPE html> <html> <head> <script type="text/javascript"> //继承第一种方式：call方法方式 Function对象中的方法function test(str1,str2){     alert(this.name+" , "+str1+" , "+str2); } var object =new Object(); object.name="zhangsan";test.call(object,"liujl","1234"); </script> </head>         <body> </body> </html>
    • 使用call方法方式实现继承 
<!DOCTYPE html> <html> <head> <script type="text/javascript"> //继承第二种方式:使用call方法方式实现对象继承 function Parent(username) {     this.username=username;     this.sayHello=function(){         alert(this.username);     } }function Child(username,password) {     Parent.call(this,username);//调用父对象的call方法    //Parent.call(this,new Array(username));     this.password=password;     this.sayWorld=function(){         alert(this.password);     } }var parent=new Parent("zhangsan"); var child=new Child("lisi","1234"); parent.sayHello();child.sayHello(); child.sayWorld();</script> </head>         <body> </body> </html>

 

  • 第三种方式: apply方法方式

apply方法也属于 Function对象，所以方法都可以调用apply。

跟call方法唯一不同的是：只采用数组传递参数。而call接收离散参数列表也接收数组。

<!DOCTYPE html> <html> <head> <script type="text/javascript"> //继承第三种方式:使用apply方法方式实现对象继承 function Parent(username) {     this.username=username;     this.sayHello=function(){         alert(this.username);     } }function Child(username,password) {     Parent.apply(this,new Array(username));//调用父对象的apply方法     this.password=password;     this.sayWorld=function(){         alert(this.password);     } }var parent=new Parent("zhangsan"); var child=new Child("lisi","1234"); parent.sayHello();child.sayHello(); child.sayWorld();</script> </head>         <body> </body> </html>

  • 第四种方式: 原型链方式

缺点：无法给构造函数传递参数

<!DOCTYPE html><html> <head><script type="text/javascript">//继承第四种方式:原型链方式(prototype chain)function Parent(){}Parent.prototype.hello="hello";Parent.prototype.sayHello=function(){    alert(this.hello);}function Child(){}Child.prototype=new Parent();//关键
Child.prototype.world="world";Child.prototype.sayWorld=function(){    alert(this.world);}var child=new Child();child.sayHello();child.sayWorld();</script></head>         <body></body></html>

 

 

 

 

  • 第五种方式: 混合方式实现对象继承----推荐使用

1.父对象 ,将属性定义在构造函数里。

2.父对象 ,方法通过原型的方式定义在构造函数外。

3.子对象,通过call继承属性。

4.子对象，通过将自身的原型指向父对象来进行父对象方法的继承。

<!DOCTYPE html><html> <head><script type="text/javascript">//继承第五种方式:混合方式
//1.父对象 ,将属性定义在构造函数里。//2.父对象 ,方法通过原型的方式定义在构造函数外。//3.子对象,通过call方法继承父对象属性。//4.子对象，通过将自身的原型指向父对象来进行父对象方法的继承。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 child=new Child("hello","world");child.sayHello();child.sayWorld();</script></head>         <body></body></html>

javascript中的继承


联系
我们