码迷,mamicode.com
首页 > 编程语言 > 详细

javascript中的继承

时间:2014-12-30 18:56:41      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

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

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

因为当父类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中的继承

标签:

原文地址:http://www.cnblogs.com/qq-757617012/p/4194097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!