詳解JavaScript繼承方式（三）

本文繼續給大家來詳解JavaScript繼承方式，主要以程式碼的形式和大家分享，希望能幫助大家。

1.繼承工具函數三

/**
 * @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;}

測試如下，

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

可以看到這種寫類別方式，繼承方式完全採用原型機制。

2，繼承工具函數四

這種方式是目前比較流行的，51ditu網站的開發就是依照這個模式的。 

/**
 * @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;
}

按 建構函數+原型 方式寫類，即屬性掛在this上，方法掛在prototype上。

/**
 *  父类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;}

注意子類別Man中要顯示的呼叫父類別建構器已完成父類別的屬性/欄位拷貝。

extend調用，建立Man的實例

extend(Man,Person);
var m = new Man('USA','jack');
console.log(m)
;m.setName('lily');
console.log(m.name);

以上是詳解JavaScript繼承方式（三）的詳細內容。更多資訊請關注PHP中文網其他相關文章！