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 = new Parent ( "jack" ) ;    var child1 = new Child ( "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 = new Parent ( "jack" ) ;    var c1 = new Child ( "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 , 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 ( ) ;

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 = new Parent ( ) ;    Child . prototype . world = "world" ;    Child . prototype . sayWorld = function ( ) {         alert ( this . world ) ;    }    var c1 = new Child ( ) ;    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 = new Parent ( ) ;    Child . prototype . sayWorld = function ( ) {         alert ( this . world ) ;    }    var c1 = new Child ( "HELLO" , "WORLD" ) ;    c1 . sayHello ( ) ;    c1 . sayWorld ( ) ;