首頁  >  文章  >  web前端  >  JavaScript不使用prototype和new實作繼承機制_javascript技巧

JavaScript不使用prototype和new實作繼承機制_javascript技巧

WBOY
WBOY原創
2016-05-16 16:23:471149瀏覽

此方法並非筆者原創,筆者只是在前輩的基礎上,加以總結,得出一種簡潔實用的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();  //飛べます!
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn