JavaScript での継承のいくつかの実装方法-jsチュートリアル-php.cn

JavaScript での継承のいくつかの実装方法

php中世界最好的语言

リリース： 2020-02-27 14:04:54

転載

2854 人が閲覧しました

この記事では、JavaScript における継承の実装方法をいくつか紹介します。この記事を読んで、JavaScript における継承についてある程度理解していただければ幸いです。

JavaScript での継承のいくつかの実装方法

JavaScript における継承のいくつかの実装メソッド

継承

継承を実装したい場合は、まずプロパティとメソッドを提供する親クラス (コンストラクター) を用意する必要があります。

function Father(name){
    this.name=name   //父类构造函数中的属性
}
Father.prototype.age=&#39;40&#39;   //父类原型中的属性

ログイン後にコピー

1.コンストラクターの継承を借用する

var Son=function(){
    Father.call(this,...arguments)
    this.age=10
}
var son=new Son(&#39;小明&#39;)
console.log(son)   //{name: "小明", age: 10}

ログイン後にコピー

このとき、Son関数はcallメソッドを通じて子コンストラクター内の親コンストラクターを呼び出すだけです

つまり、親クラスのコンストラクターの属性のみを継承します。、親クラスのプロトタイプのプロパティは継承されません。

このときの判断にはinstanceofメソッドを使用できます

console.log(son instanceof Father) //false

ログイン後にコピー

2.プロトタイプチェーンを通じて継承します

var Son=function(name){
    this.sonName=name
}
Son.prototype=new Father()
var xiaoming=new Son(&#39;小明&#39;)
console.log(xiaoming)    //{sonName:&#39;小明&#39;}
console.log(xiaoming.__proto__==Son.prototype)   //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age)  //40  通过原型链查找

ログイン後にコピー

SonはFatherコンストラクターのname属性とプロトタイプのage属性を継承します

Sonのプロトタイプオブジェクト Xiao Ming が継承 Son コンストラクターの SonName 属性、Father コンストラクターの name 属性、およびプロトタイプの age 属性は削除されますが、値は Son にのみ渡せ、Father には渡せません。

3. 結合継承 (プロトタイプチェーン継承と借用コンストラクター継承の結合)

var Son=function(){
    Father.call(this,...arguments)
}
Son.prototype=new Father()
var son=new Son(&#39;小明&#39;)
console.log(son)  //{name:&#39;小明&#39;}
console.log(son.age) //40

ログイン後にコピー

は、プロトタイプのプロパティとメソッドを継承できない、パラメーターを渡せないという問題を解決するために、2 つの継承メソッド 1 と 2 を結合します。実際、サブクラスは親クラスの 2 つの属性を持ちますが、サブクラスの属性は親クラスの属性 (Father.call()、new Father()) をカバーします

4。 for... では、親クラスオブジェクトとプロトタイプオブジェクトの列挙可能なプロパティとメソッドを Son のプロトタイプに周期的に割り当てます

function Son(name){
  var father=new Father()
  for(let i in father){
    console.log(father[i])
    Son.prototype[i]=father[i]
  }
  Son.prototype.name=name
}
var son=new Son(&#39;leo&#39;)
console.log(son)

ログイン後にコピー

このメソッドは、親クラスの列挙不可能なメソッドを取得することはできず、同時に、親クラスのプロパティとメソッドをコピーすると、メモリ使用量が比較的多くなり、効率が低くなります。

5. プロトタイプの継承

プロトタイプの継承を使用するには、クラスを定義し、パラメーター obj を渡し、obj オブジェクトを継承するオブジェクトを生成する必要はありません。オブジェクトをコピーして関数でラップするのと似ています。ただし、これはクラスの継承ではなく、プロトタイプベースであり、クラスの概念がありません。

function ObjectCreate(obj){ //这个方法的原理就是Object.create()
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father(&#39;son&#39;);
var son=ObjectCreate(Son)
var objson=Object.create(Son);
console.log(son.name)   //son
console.log(objson.name)  //son
console.log(son.__proto__==Son)  //true

ログイン後にコピー

6. 寄生継承

継承プロセスをカプセル化するためだけに関数を作成し、内部で何らかの方法でオブジェクトを拡張し、最後にオブジェクトを返します

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father();
function subObject(obj){
  var sub=ObjectCreate(obj)
  sub.name=&#39;son&#39;
  return sub
}
var son=subObject(Son)
console.log(son.name)  //son

ログイン後にコピー

7. 寄生結合継承

組み合わせ結合継承は 2 つのスーパークラス属性なしで継承を完全に実現しますが、複雑すぎて結合継承よりも劣っていると感じます。

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()  
}
var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型
function Son(){
  Father.call(this,...arguments)
}
Son.prototype=middle; 
middle.construtor=Son;   //修复实例 
var son=new Son(&#39;son&#39;);
console.log(son)   //{name:&#39;son&#39;}

ログイン後にコピー

この記事は

js チュートリアル

コラムからのものです。学習へようこそ!

以上がJavaScript での継承のいくつかの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。