JS中的繼承方式總結

1. 原型鏈繼承

Child.prototype = new Parent();

 1 function Parent (name, age) {
 2     this.name = name;
 3     this.age = age;
 4 }
 5 Parent.prototype.say = function(){
 6     console.log('hello, my name is ' + this.name);
 7 };
 8 function Child() {
 9 }
10 Child.prototype = new Parent('pursue');
11 var child1 = new Child();
12 child1.say(); //hello, my name is pursue
13 var child2 = new Child();
14 console.log(child1.say === child2.say);//true
15 console.log(child1.name === child2.name);//true

2. call(thisObj, param1, param2,...)

 1 function Parent(username){
 2     this.username = username;
 3     this.hello = function(){
 4       alert(this.username);
 5     }
 6   }
 7   function Child(username,password){
 8     Parent.call(this,username);
 9     this.password = password;
10     this.world = function(){
11       alert(this.password);
12     }
13   }
14   var parent = new Parent("zhangsan");
15   var child = new Child("lisi","123456");
16   parent.hello();
17   child.hello();
18   child.world();

3. apply(thisObj, [param1,param2,...])

 1 function Parent(username){
 2     this.username = username;
 3     this.hello = function(){
 4       alert(this.username);
 5     }
 6   }
 7   function Child(username,password){
 8     Parent.apply(this,new Array(username));
 9     this.password = password;
10     this.world = function(){
11       alert(this.password);
12     }
13   }
14   var parent = new Parent("zhangsan");
15   var child = new Child("lisi","123456");
16   parent.hello();
17   child.hello();
18   child.world();

4. 組合繼承(call+原型鏈 / apply+原型鏈)

 1 function Parent(hello){
 2     this.hello = hello;
 3   }
 4   Parent.prototype.sayHello = function(){
 5     alert(this.hello);
 6   }
 7   function Child(hello,world){
 8     Parent.call(this,hello);//利用 call 方法 將父類的屬性繼承過來
 9     //Parent.apply(this,new Array(hello));//利用 apply 方法 將父類的屬性繼承過來
10     this.world = world;//新增一些屬性
11   }
12   Child.prototype = new Parent();//將父類的方法繼承過來
13   Child.prototype.sayWorld = function(){//新增一些方法
14     alert(this.world);
15   }
16   var c = new Child("zhangsan","lisi");
17   c.sayHello();
18   c.sayWorld();

5.寄生組合繼承，與4相似，只是將原型鏈換做了Object.create(Parent.prototype)

 1 function Parent(hello){
 2     this.hello = hello;
 3   }
 4   Parent.prototype.sayHello = function(){
 5     alert(this.hello);
 6   }
 7   function Child(hello,world){
 8     Parent.call(this,hello);//利用 call 方法 將父類的屬性繼承過來
 9     //Parent.apply(this,new Array(hello));//利用 apply 方法 將父類的屬性繼承過來
10     this.world = world;//新增一些屬性
11   }
12   Child.prototype = Object.create(Parent.prototype);//將父類的方法繼承過來
13   Child.prototype.sayWorld = function(){//新增一些方法
14     alert(this.world);
15   }
16   var c = new Child("zhangsan","lisi");
17   c.sayHello();
18   c.sayWorld();