javascriptプログラミングの継承

2629 ワード

jsの中の継承はどれぐらいの方式がありますか?ある度に探してみます.何種類かのものがあります.目がくらみますか?それとも雲の中ですか?自分でよく整理して、自分の理解によって分類します.
JS継承を実現する核心技術点はいくつかにすぎない.
 1: new    
 2: prototype
 3: call、apply
 4: Object.create() ES5
 5: Object.assign() ES6
 6:   (   、   )
ネット上では4、5、6種類と言われていますが、多くは組み合わせで使われて、具体的な使用状況によって分類されます.また、阮一峰先生は構造関数、非構造関数の分類(これは分かりやすいです.)によって、それぞれの道理があります.そこで自分でまとめてみます.
1,構造関数式継承,new
var func=function(name){
this.name=name
};
var b=new func("b");
var c=new func("c");
b.name;//b
c.name;//c
2、プロトタイプチェーン継承、プロトタイプ
var func=function(des){
this.des=des;
};
func.prototype.color="red";
var b=function(){
this.color=function(){
return "green"
}
return "orange"
};
b.prototype=func.prototype;//   des    
b()//orange
new b().color()// green
new b().color;// function(){return "green"}       
3,call、appy
/* */
function Parent(add,net,no,teacher) {
 this.add = add;
 this.net = net;
 this.no = no;
 this.teacher = teacher
}
/* */
function Child(name,age,sex,id) {
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.id = id;
 Parent.call(this,"  ","www.google.com","1024","copy"); 
 //     Parent  this   Child   
}
var child = new Child("   ","18"," ","2333");
child.add //  
function Parent(add,net,no,teacher) {
 this.add = add;
 this.net = net;
 this.no = no;
 this.teacher = teacher
}
/*  */
function Child(name,age,sex,id) {
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.id = id;
 Parent.apply(this,["  ","www.google.com","1024","copy"]); 
 //     Parent  this   Child   
}
var child = new Child("   ","18"," ","2333");
child.add //  
4,Object.creat()ES 5サポート
var func=function(des){
this.des=des || "empty"
};
func.prototype.getDes=function(){
 return this.des
}

var b=function(){}
b.prototype=Object.create(new func("   "));
//  new func("   ")  JSON            ,           
new b("Dobie").getDes()//    
5:Object.assign()ES 6サポート
var func=function(des){
this.des=des || "empty"
};
func.prototype.getDes=function(){
 return this.des
}

var b=function(){}
b.prototype=Object.assign(new func("   "));
//  new func("   ")  JSON            
new b("Dobie").getDes()//    
6:コピー(深コピー、薄いコピー)
           ,    ,      ,          ,
           (     javascript    ,     ),
         ,                 ,