ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の継承パターンの簡単な説明_JavaScript スキル

JavaScript の継承パターンの簡単な説明_JavaScript スキル

WBOY
リリース: 2016-05-16 15:20:24
オリジナル
1084 人が閲覧しました

本当の意味では、JavaScript はオブジェクト指向言語ではなく、従来の継承メソッドを提供しません。ただし、JavaScript 自体が提供するプロトタイプのプロパティを使用して継承を実現します。 Javascript のプロトタイプ継承は腐っていると言われていますが、私はこの問題を完全には理解していませんでした。今日は「Javascript Patterns」のプロトタイプ継承のいくつかのメソッドをもう一度読んでみました。 JS での単純な継承方法。異なる意見がある場合は、ご提案をお願いします。

最も基本的なプロトタイプ チェーンの継承についてはここでは繰り返しませんが、主に他の継承モードについて説明します。

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

function Father (name) {
this.name=name;
}
function Son (name) {
Father.call(this,name); //在子类型中调用超类型的构造函数
this.age=15;
}
var me=new Son("Su"); 
ログイン後にコピー

利点: 画像内の name 属性など、サブタイプのパラメーターを渡すことができます。

欠点: 1. メソッドはコンストラクター内で定義されているため、再利用できません。 2. スーパータイプのプロトタイプで定義されたメソッドは、サブタイプには表示されません。

2. 結合された継承 (包括的なプロトタイプチェーンとコンストラクター)

//超类型构造函数function Father (name) {
this.name=name;
this.famMember=[];
}//超类型构造函数原型方法
Father.prototype.sayName=function () {
alert(this.name);
}//子类型构造函数
function Son (name,age) {
Father.call(this,name); //构造函数方法
this.age=age;
}
Son.prototype=new Father(); //重写子类型原型对象
Son.prototype.constructor=Son; //重写构造函数属性指向子类型
Son.prototype.sayAge=function () {
alert(this.age);
} //重写原型对象后再加入方法
var me=new Son("Su",15);
me.famMember.push("dad","mom"); //子类型可以调用超类型构造函数内的方法var he=new Son("Li",14);alert(he.famMember); // [] 
ログイン後にコピー

利点: 異なるサブクラスは独自のプロパティを持つことも、同じメソッドを使用することもできます。

欠点: このメソッドではスーパータイプ コンストラクターを 2 回呼び出す必要があり、同じ名前の属性メソッドは 1 回オーバーライドされます。

3. プロトタイプの継承 (Object.create() と同様)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}var obj={}; //将obj对象传入作为新对象的原型。var me=object(obj); 
ログイン後にコピー

この継承方法を使用するには、プロトタイプ オブジェクトとしてオブジェクトが必要であるため、それを継承するすべてのサブタイプの属性メソッドは共通です。

ES5 は、新しい Object.creatr() メソッドを通じてプロトタイプの継承を標準化します。

4. 寄生継承 (プライベートメソッドを設定できるプロトタイプの継承)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}
var obj={}; //将obj对象传入作为新对象的原型。到这里都与原型式继承相同function creObj(o) {  var clone=object(obj);  clone.sayHi=function () {    alert("Hi");  };return clone; }
var me=creObj(obj); 
ログイン後にコピー

利点: このメソッドは、パブリック プロパティ メソッドのみを使用してプロトタイプ継承の欠点を補い、サブタイプがプライベート プロパティ メソッドを持つことができるようにします。

5. 寄生結合継承

function inherit (father,son) {
var pro=Object(father.prototype); //创建超类型原型对象的副本
pro.constructor=son;
son.prototype=pro;           //将副本作为子类型的原型对象
} 
ログイン後にコピー

このメソッドは、結合継承における属性メソッドの適用範囲の問題を補うために使用されます。

上記のコードを使用して、結合継承内のコード Son.prototype=new Father(); を置き換えます。このように、親型のコンストラクターは 1 回呼び出すだけで済み、冗長で不要な属性メソッドの作成を回避し、プロトタイプ チェーンを変更しないで済む理想的な参照型の継承方法です。

js 継承モードについて大まかに説明します。詳細については、引き続き Script House の Web サイトをご覧ください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート