Maison  >  Article  >  interface Web  >  JavaScript n'utilise pas de prototype ni de nouveau pour implémenter le mécanisme d'héritage_javascript conseils

JavaScript n'utilise pas de prototype ni de nouveau pour implémenter le mécanisme d'héritage_javascript conseils

WBOY
WBOYoriginal
2016-05-16 16:23:471149parcourir

Cette méthode n'est pas la création originale de l'auteur. Je l'ai simplement résumée sur la base de mes prédécesseurs et j'ai proposé une méthode d'héritage JavaScript simple et pratique.

L'héritage JavaScript traditionnel est basé sur la chaîne de prototypes et nécessite l'utilisation d'un grand nombre de nouvelles opérations. Le code n'est pas assez concis, la lisibilité n'est pas très forte et il semble sensible à la pollution de la chaîne de prototypes. .

La méthode d'héritage résumée par l'auteur est concise et claire Bien que ce ne soit pas la meilleure méthode, j'espère qu'elle pourra inspirer les lecteurs.

Bon, plus de bêtises, il suffit de regarder le code, les commentaires sont détaillés, vous pouvez le comprendre d'un coup d'œil~~~

Copier le code Le code est le suivant :

 /**
* 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();  //飛べます!
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn