JavaScript 繼承方式（3）

作者: snandy 來源: 博客園發布時間: 2011-03-15 11:28 閱讀: 724 次推薦: 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;}

　　測試如下：

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

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

　　4，繼承工具函數四

　　這種方式是目前比較流行的，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的實：