JavaScript五种继承方式

http://www.html5war.com/?p=358#127501-tsina-1-65799-37403ee4d52bdcc85c83ed483a1ad958

1）继承第1种方式：对象冒充

JavaScript

function Parent(username){      this.username = username;      this.sayHello = function(){          alert(this.username);      }  }  function Child(username,password){      //下面三行是关键代码      this.method = Parent;      this.method(username);      delete this.method;      this.password = password;      this.sayWorld = function(){          alert(this.password);      }  }  var parent1 = new Parent("jack");  var child1 = new Child("kyle","123");  parent1.sayHello();  child1.sayHello();  child1.sayWorld();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function Parent(username){  

    this.username= username;  

    this.sayHello= function(){  

        alert(this.username);  

    }  

}  

function Child(username,password){  

    //下面三行是关键代码  

    this.method= Parent;  

    this.method(username);  

    delete this.method;  

    this.password= password;  

    this.sayWorld= function(){  

        alert(this.password);  

    }  

}  

var parent1= newParent("jack");  

var child1= newChild("kyle","123");  

parent1.sayHello();  

child1.sayHello();  

child1.sayWorld();

2）继承第2种方式：call方法

call方法是Function对象中的方法，因此我们定义的每个函数都拥有该方法。可以通过函数名来调用call方法，call方法的第一个参数会被传递给函数中的this，从第二个参数开始，逐一赋值给函数中的参数。

JavaScript

function Parent(username){      this.username = username;      this.sayHello = function(){          alert(this.username);      }  }  function Child(username,password){      Parent.call(this,username);      this.password = password;      this.sayWorld = function(){          alert(this.password);      }  }  var p1 = new Parent("jack");  var c1 = new Child("kyle","123");  p1.sayHello();  c1.sayHello();  c1.sayWorld();

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.sayHello= function(){  

        alert(this.username);  

    }  

}  

function Child(username,password){  

    Parent.call(this,username);  

    this.password= password;  

    this.sayWorld= function(){  

        alert(this.password);  

    }  

}  

var p1= newParent("jack");  

var c1= newChild("kyle","123");  

p1.sayHello();  

c1.sayHello();  

c1.sayWorld();

3）继承第3种方式：apply方法

apply方法与call方法的不同之处在于，apply方法第二个参数传递的是一个数组，而不像call方法那样以离散的形式传递参数。

JavaScript

function Parent(username){      this.username = username;      this.sayHello = function(){          alert(this.username);      }  }  function Child(username,password){      <strong>Parent.apply(this,new Array(username));</strong>      this.password = password;      this.sayWorld = function(){          alert(this.password);      }  }  var p1 = new Parent("jack");  var c1 = new Child("kyle","123");  p1.sayHello();  c1.sayHello();  c1.sayWorld();

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.sayHello= function(){  

        alert(this.username);  

    }  

}  

function Child(username,password){  

    <strong>Parent.apply(this,newArray(username));</strong>  

    this.password= password;  

    this.sayWorld= function(){  

        alert(this.password);  

    }  

}  

var p1= newParent("jack");  

var c1= newChild("kyle","123");  

p1.sayHello();  

c1.sayHello();  

c1.sayWorld();

4）继承第4种方式：原型链方式

该方式的缺点是不能够传递参数。初始化必须要等对象创建之后

JavaScript

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 c1 = new Child();  c1.sayHello();  c1.sayWorld();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

function Parent(){  

}  

Parent.prototype.hello= "hello";  

Parent.prototype.sayHello= function(){  

    alert(this.hello);  

}  

function Child(){  

}  

Child.prototype= newParent();  

Child.prototype.world= "world";  

Child.prototype.sayWorld= function(){  

    alert(this.world);  

}  

var c1= newChild();  

c1.sayHello();  

c1.sayWorld();

5）继承第5种方式：混合方式（推荐）

JavaScript

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 c1 = new Child("HELLO","WORLD");  c1.sayHello();  c1.sayWorld();

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= newParent();  

Child.prototype.sayWorld= function(){  

    alert(this.world);  

}  

var c1= newChild("HELLO","WORLD");  

c1.sayHello();  

c1.sayWorld();