JavaScriptの継承方法を詳しく解説(3)

この記事では、主にコードの形式で共有しながら、JavaScript の継承方法について詳しく説明していきます。お役に立てれば幸いです。

1. ツール関数 3 の継承

/**
 * @param {Function} subCls
 * @param {Function} superCls
 */
function extend(subCls,superCls) {
subCls.prototype = new superCls();
}

親クラス。プロトタイプ モードで記述されます。つまり、属性とメソッドはすべてプロトタイプにハングされます。

/**
 *  父类Person
 */
function Person(){}
Person.prototype.nationality = 'China';
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}

サブクラスの継承と親クラス

function Man() {}
extend(Man,Person);

親クラスの属性とメソッドを継承した後、メソッド

Man.prototype.name = 'jack';
Man.prototype.getName = function() { return this.name;}
Man.prototype.setName = function(n) { this.name=n;}

を次のようにテストします。そして継承のプロトタイプ機構を完全採用。

2、ツール機能 4 の継承

現在、この方法がより一般的であり、51ditu Web サイトの開発はこのモデルに基づいています。

var m = new Man();
console.log(m);
console.log(m instanceof Person);

コンストラクター + プロトタイプ メソッドに従ってクラスを記述します。つまり、属性は this にぶら下がり、メソッドはプロトタイプにぶら下がります。

/**
 * @param {Function} subCls 子类
 * @param {Function} superCls 父类
 */
function extend(subCls,superCls) {
//暂存子类原型
var sbp = subCls.prototype;
//重写子类原型--原型继承
subCls.prototype = new superCls();
//重写后一定要将constructor指回subCls
subCls.prototype.constructor = subCls;
//还原子类原型
for(var atr in sbp) {
subCls.prototype[atr] = sbp[atr];
}
//暂存父类
subCls.supr = superCls;
}

サブクラス Man に表示される親クラスのコンストラクターが、親クラスのプロパティ/フィールドのコピーを完了していることに注意してください。

呼び出しを拡張して Man のインスタンスを作成します

/**
 *  父类Person
 */
function Person(nationality){
this.nationality = nationality;
}
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}
/**
 *  子类Man
 */
function Man(nationality,name) {
Man.supr.call(this,nationality); //很重要的一句，调用父类构造器
this.name = name;
}
Man.prototype.getName = function() {return this.name;}
Man.prototype.setName = function(n) {this.name=n;}

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