Javascript_javascript スキルで継承を実装する方法についての簡単な説明

S1: js 内のすべてはオブジェクトです。プロトタイプの概念を考慮して、最初に継承を実装する方法を考えてみましょう。

function Parent(){
   this.name='123';
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
console.log('Name :'+son.getName()+';Age: '+son.getAge());
 
 
VM1777:16 Name :123;Age: 20

上記からわかるように、Parent の継承は主に Son のプロトタイプを上書きすることであり、このようにして、Parent のプロパティとメソッドが Son のプロトタイプに渡され、新しい Son を通じてオブジェクトが構築されます。 () はすべてプロトタイプ (つまり、親オブジェクト Parent) からプロパティとメソッドを継承するため、継承効果が得られますが、これには副作用が生じます。つまり、親オブジェクトに参照型属性が含まれている場合、子オブジェクトは参照型 data を変更し、すべてのサブオブジェクトに影響を与えますが、明らかにこれは必要な効果ではありません:

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple", "pear"]

S2: この問題を解決するために現在考えられているのは、各子オブジェクトに親オブジェクトの属性のコピーを持たせることです。このようにして、属性を変更するときに、属性に影響を与えることなく、子オブジェクトの下の属性のみが変更されます。他の子オブジェクトの。この目標は、オブジェクト偽装の以前の方法を参照することで達成されます

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple"]

上記の Son 関数に Parent.call(this) を追加して、この [新しい Son オブジェクト] が new Son() 中に Parent() 関数を呼び出すための Parent 関数内のコンテキスト this であるかのように見せました。親オブジェクトのプロパティとメソッドのコピーを取得したため、次に親オブジェクトのプロパティとメソッドを変更すると、実際には変更されたコピーになるため、すべての子オブジェクトに影響を与えないという効果が得られます。ただし、Son.prototype=new Parent() を使用しているため、コピーを取得した後は、親オブジェクトのプロトタイプのみが必要になります。 getname();

のみが必要です。

S3: 次のステップは、インスタンスの属性とメソッドを削除することです。ここでコンストラクターが登場し、Parent.prototype を子オブジェクトのプロトタイプとしてネイティブ オブジェクトに再構築します。次に、コンストラクターがサブコンストラクター

を指すようにします。

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
function Extend(Parent,Son){
   var proto = new Object(Parent.prototype);
   proto.constructor = Son;
   Son.prototype=proto;
}
Extend(Parent,Son);
Son.prototype.getAge=function(){
   return this.age;
}

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。