此方法並非筆者原創,筆者只是在前輩的基礎上,加以總結,得出一種簡潔實用的JavaScript繼承方法。
傳統的JavaScript繼承基於prototype原型鏈,需要使用大量的new操作,程式碼不夠簡潔,可讀性也不是很強,似乎還容易受到原型鏈污染。
筆者總結的繼承方式,簡潔明了,雖然不是最好的方式,但希望能帶給讀者啟發。
好了,廢話不多說,直接看程式碼,註解詳盡,一看就懂~~~
/**
* 2011 年 11 月 14 日にヤン ユアンによって作成されました。
* プロトタイプを使用せずに継承を実装
*
*/
/**
* Javascript オブジェクトのコピーでは、1 つのレイヤーのみがコピーされ、関数の属性のみがコピーされますが、これは普遍的ではありません。
* @param obj コピーされるオブジェクト
* @returns オブジェクト
*/
Object.prototype.clone = function(){
var _s = これ、
newObj = {};
_s.each(関数(キー, 値){
if(Object.prototype.toString.call(value) === "[オブジェクト関数]"){
newObj[キー] = 値;
}
});
newObj を返す;
};
/**
* obj
の独自の属性をすべてトラバースします
*
* @param callback コールバック関数。コールバックには 2 つのパラメータが含まれます: key 属性名、value 属性値
*/
Object.prototype.each = function(callback){
var key = "",
_this = これ;
for (_this をキー入力){
if(Object.prototype.hasOwnProperty.call(_this, key)){
callback(key, _this[key]);
}
}
};
/**
* サブクラスを作成
* @param ext obj、書き換えまたは拡張が必要なメソッドが含まれています。
* @returns オブジェクト
*/
Object.prototype.extend = function(ext){
var child = this.clone();
ext.each(関数(キー, 値){
子[キー] = 値;
});
子を返します;
};
/**
* オブジェクト(インスタンス)の作成
* @param 引数は、コンストラクターのパラメーター リストとして任意の数のパラメーターを受け入れます
* @returns オブジェクト
*/
Object.prototype.create = function(){
var obj = this.clone();
if(obj.construct){
obj.construct.apply(obj, 引数);
}
obj を返します;
};
/**
※使用例
* 面倒なプロトタイプや新しいものを避けるために、この継承方法を使用します。
※ただし、作者が書いた現在の例では、親クラスの関数(メンバメソッドとして理解できる)しか継承できません。
※よりリッチなコンテンツを継承したい場合は、クローン方法を改善してください。
*
*
*/
/**
* 動物 (親クラス)
* @type {{構築: 構築、食べる: 食べる}}
*/
var 動物 = {
構成: 関数(名前){
this.name = 名前;
}、
食べる: function(){
console.log("私の名前は " this.name " です。私は食べられます!");
}
};
/**
* 鳥 (サブカテゴリ)
* Birds は親クラスの Eat メソッドをオーバーライドし、fly メソッドを拡張します
* @type {サブクラス|void}
*/
var Bird = Animal.extend({
食べる: 関数(食べ物){
console.log("私の名前は " this.name " です。私は " 食べ物 " を食べることができます!");
}、
フライ: function(){
console.log("飛べます!");
}
});
/**
* 鳥インスタンスを作成します
* @type {ジム}
*/
varbirdJim = Bird.create("ジム"),
birdTom = Bird.create("トム");
birdJim.eat("ワーム"); //私の名前はジムです。虫も食べられるよ!
鳥ジム.フライ(); //飛べます!
BirdTom.eat("米"); //私の名前はトムです。ご飯も食べられるよ!
鳥Tom.fly(); //飛べます!