JavaScript プロトタイプ継承コンストラクター継承_javascript スキル-jsチュートリアル-php.cn

JavaScript プロトタイプ継承コンストラクター継承_javascript スキル

WBOY

リリース： 2016-05-16 18:02:58

オリジナル

1169 人が閲覧しました

前回は「JavaScript プロトタイプ継承の基本的な仕組み」について説明しましたが、今回はコンストラクターの継承について詳しく説明します。

簡単な例から始めて、人間を記述する People コンストラクターを作成します。

 
function People(){ 
this.race = 'Stupid Human'; 
} 

次に、次のような Yellow コンストラクターを作成します。黄色人種 :

コードをコピーコードは次のとおりです:

 
function Yellow(name, Skin){ 
 this.name = name; 
this.skin = Skin;

Yellow が人間の People オブジェクトを継承できるようにするには、JavaScript でシミュレートできます。いろんな意味で。

1. オブジェクトマスカレード

オブジェクトマスカレードとは、簡単に言うと、抽象クラスを通常の関数として定義するコンストラクタを使用して、疑似継承を実現することです。 >

コードをコピー

コードは次のとおりです。 function Yellow(name, Skin) { this._extend = People;

this._extend();

delete this._extend; // 人物への参照を削除します。 
this.skin = スキン; yellow1 をインスタンス化します 
var yellow1 = new Yellow('Xiao Ming', 'Yellow Skin'); 
console.log( yellow1.name); //Xiao Ming
console.log( yellow1.race); //愚かな人間 

 
このコードでは、Yellow のプライベート メソッド _extend を追加します。関数自体は参照の形式でのみ存在するため、実行中に People メソッドが自動的に呼び出され、Yellow が実行されます。コンストラクターの name パラメーター。上記のプロセスが完了し、外部メソッドへの参照がクリアされた後で、Yellow オブジェクト独自のプロパティとメソッドを定義する必要があります。 

注: 複数の継承はオブジェクトの偽装を通じて実現できます

2. Call/apply メソッド

何も使用せずに call/apply メソッドを使用して継承を実装する方が簡単な場合があります。面倒な手順操作:

コードをコピー

コードは次のとおりです:

function Yellow(name,スキン) { People.apply(this, argument); this.name = name; this.skin = スキン; // yellow2 をインスタンス化します

var yellow2 = new Yellow(' David', 'darkskin')

console.log( yellow2.name); // デビッド 
console.log( yellow2.race); // これが入力です適用引数配列の代わりに、新しい配列またはリテラル配列を使用することもできます。 

3. プロトタイプの連鎖 

最初のプロトタイプ継承メソッドは、オブジェクトのプロトタイプを親クラスのインスタンスにポイントすることです: 

コードをコピーします

コードは次のとおりです。

Yellow.prototype = new People() Yellow.prototype.constructor = Yellow ; //最初のプロトタイプは完全にクリアされているため、コンストラクターをリセットするのが最善です var yellow3 = new Yellow('小王', '黄 Skin'); console.log( yellow3.race); // 愚かな人間たち上記のコードは逆に理解できます。 yellow3 インスタンス自体は Race 属性を見つけることができず、そのプロトタイプの Race 属性はたまたまそのインスタンスの Race 属性です。人々は反対します。

People オブジェクトのプロパティがプロトタイプに記述されている場合、インスタンスを作成する必要はありません。Yellow のプロトタイプ プロパティを People のプロトタイプ プロパティにポイントするだけです。

コードをコピーします

コードは次のとおりです:

function People(){}; People.prototype.race = 'Stupid Humans'; Yellow.prototype = People.prototype; Yellow.prototype.constructor = Yellow; これは、ポインタを変更するだけです。環境に優しい。ただし、参照型の関係により、Yellow と People は同じプロトタイプオブジェクトを指します。つまり、Yellow.prototype.constructor を変更すると、実際には People のプロトタイプオブジェクトが破棄されます。

この場合、空のリレー オブジェクトを使用して、親クラスのプロトタイプをバイパスできます: 

コードをコピー

コードは次のとおりです:

 
var F = function(){}; 
F.prototype = People.prototype; 
Yellow.prototype = new F(); 
Yellow.prototype.constructor = 黄; 