javascriptプログラミングの継承
2629 ワード
jsの中の継承はどれぐらいの方式がありますか?ある度に探してみます.何種類かのものがあります.目がくらみますか?それとも雲の中ですか?自分でよく整理して、自分の理解によって分類します.
JS継承を実現する核心技術点はいくつかにすぎない.
1,構造関数式継承,new
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 , ),
, ,