プロトタイプの最初の方法:
// class class function person(){this.hair = 'black'; this.eye = 'black'; this.skin = 'Yellow'; this.view = function(){this.hair + '、' + this.eye + '、' + this.skin; }} // subclass function man(){this.feature = ['beard'、 'strong']; } man.prototype = new person(); var one = new Man(); console.log(one.feature); // ['beard'、 'strong'] console.log(one.hair); // Black Console.log(one.eye); // Black Console.log(one.skin); // yellow Console.log(one.view()); //黒、黒、黄色この方法は最も簡単です。サブクラスのプロトタイプ属性値を継承されたインスタンスに割り当てるだけで、継承されたクラスメソッドを直接使用できます。
プロトタイプの属性とはどういう意味ですか?プロトタイプはプロトタイプです。各オブジェクト(関数で定義)には、オブジェクトタイプであるデフォルトのプロトタイププロパティがあります。
また、このデフォルト属性は、チェーンのアップスライドチェックを実装するために使用されます。これは、オブジェクトの属性が存在しない場合、プロトタイプ属性が属するオブジェクトを介して属性が見つかることを意味します。プロトタイプが見つからない場合はどうなりますか?
JSは、プロトタイププロパティがプロトタイプ属性に属するオブジェクトを自動的に見つけます。そのため、プロパティまたはプロトタイプが見つかり、最終的に空(「未定義」)が見つかるまでプロトタイプを介してインデックスを作成し続けます。
たとえば、上記の例では、one.view()メソッドでは、JSはまず、1つのインスタンスにView()メソッドがあるかどうかを調べます。いやないので、それはman.prototype属性を探し、プロトタイプの価値は人の例です。
このインスタンスにはview()メソッドがあるため、呼び出しが成功します。
2番目の方法は、適用することです。
// class class function person(){this.hair = 'black'; this.eye = 'black'; this.skin = 'Yellow'; this.view = function(){this.hair + '、' + this.eye + '、' + this.skin; }} // subclass function man(){// person.apply(this、new array()); person.apply(this、[]); this.feature = ['beard'、 'strong']; } var one = new Man(); console.log(one.feature); // ['beard'、 'strong'] console.log(one.hair); // Black Console.log(one.eye); // Black Console.log(one.skin); // yellow Console.log(one.view()); //黒、黒、黄色注:適用パラメーターが空の場合、つまりパラメーターが渡されない場合、new array()と[]に渡され、nullは無効です。
3番目のタイプはcall+プロトタイプです:
// class class function person(){this.hair = 'black'; this.eye = 'black'; this.skin = 'Yellow'; this.view = function(){this.hair + '、' + this.eye + '、' + this.skin; }} // subclass function man(){// person.apply(this、new array()); person.call(this、[]); this.feature = ['beard'、 'strong']; } man.prototype = new person(); var one = new Man(); console.log(one.feature); // ['beard'、 'strong'] console.log(one.hair); // Black Console.log(one.eye); // Black Console.log(one.skin); // yellow Console.log(one.view()); //黒、黒、黄色コールメソッドの実装メカニズムには、もう1人のman.prototype = new Person()が必要です。なぜ?
これは、コールメソッドがメソッドの交換のみを実装し、オブジェクト属性をコピーしないためです。
これは、GoogleマップAPIが継承する方法です。
上記は、3つの継承方法の実装をまとめたものです。しかし、各方法にはその利点と短所があります。
親クラスがこのような場合:
//親クラスの関数担当者(髪、目、肌){this.hair = hair; this.eye = eye; this.skin = skin; this.view = function(){this.hair + '、' + this.eye + '、' + this.skin; }}サブクラスは、オブジェクトを作成しながら親クラスの人にパラメーターを渡すように、どのように設計する必要があります。プロトタイプの継承方法は適用されません。
適用方法または呼び出し方を使用する必要があります。
//メソッドを適用//サブクラス関数マン(髪、目、肌){person.apply(this、[hair、eye、skin]); this.feature = ['beard'、 'strong']; } //コールメソッド//サブクラス関数マン(髪、目、肌){person.call(this、髪、目、肌); this.feature = ['beard'、 'strong']; }ただし、Applyメソッドの使用にはまだ欠点があります。なぜ? JSには、非常に重要な演算子がいます。これは「InstanceOf」であり、特定の反対方向が特定のタイプであるかどうかを比較するために使用されます。
この例では、人間のタイプであることに加えて、1つのインスタンスも人タイプである必要があります。ただし、適用方法を継承した後、人のタイプに属していません。つまり、(人の1つのインスタンス)の値は偽です。
これらすべての後、継承する最良の方法はコール+プロトタイプメソッドです。その後、(ベースクラスの1つのインスタンス)の値が真であるかどうかを試すことができます。
3番目の継承方法には欠陥もあります。新しいオブジェクトをサブクラス化する場合、親クラスに必要なパラメーターを渡す必要があり、親クラスのプロパティとメソッドが再現されます。次の継承方法は完璧です。
function person(name){this.name = name; } person.prototype.getName = function(){return this.name; } function中国人(name、nation){person.call(this、name); this.nation = nation; } //継承メソッド関数継承(subclass、superclass){function f(){} f.prototype = superclass.prototype; subclass.prototype = new f(); subclass.prototype.constructor = subclass.constructor; }継承(中国語、人);中国語.prototype.getNation = function(){return this.nation; }; var p = new Person( 'Shijun'); var c = new Chinese( "liyatang"、 "China"); console.log(p); // person {name: "shijun"、getname:function} console.log(c); //中国語{name: "liyatang"、nation: "china"、constructor:function、getnation:function、getname:function} console.log(p.constructor); // function person(name){} console.log(c.constructor); // function中国人(){} console.log(c instanceof fishen); // true Console.log(c Instanceof Person); // 真実上記の記事では、JSの3つの継承方法とその利点と短所について簡単に説明します。これは私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。