-
第一种方式: 对象冒充方式
可以实现多继承，但是不推荐使用这种方式。
因为当父类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>
-
继承综合练习
使用混合方式实现对象继承。
父对象Shape，让矩形Rectangle继承Shape。
<!DOCTYPE html> <html> <head> <script type="text/javascript"> //父对象--X形 function Shape(edge){ this.edge=edge; } //父对象方法--获取面积 Shape.prototype.getArea=function(){ return -1; } //子对象---矩形 function Rectangle(wide,height){ //继承父对象的属性edge Shape.call(this,4); this.wide=wide; this.height=height; } Rectangle.prototype=new Shape();//继承父对象所有的方法 //重写某一个方法---获取矩形面积 Rectangle.prototype.getArea=function(){ return this.wide*this.height; } //扩展一个方法 Rectangle.prototype.getEdge=function(){ return this.edge; } var rectangle=new Rectangle(3,4); alert(rectangle.getEdge()); alert(rectangle.getArea()); </script> </head> <body> </body> </html>