JavaScriptコードの再利用パターンを詳しく解説_基礎知識

コードの再利用とその原則

<font face="NSimsun">代码复用</font> は、その名前が示すように、新しいプログラムを構築するために書かれたコードの一部または全部を再利用することです。コードの再利用について話すとき、最初に思い浮かぶのは <font face="NSimsun">继承性</font> です。コード再利用の原則は次のとおりです:

<code>优先使用对象组合，而不是类继承</code>

js にはクラスの概念がないため、インスタンスの概念はあまり意味がありません。js のオブジェクトは単純なキーと値のペアであり、動的に作成および変更できます。

しかし、<font face="NSimsun">js</font> では、コンストラクターと <font face="NSimsun">new</font> 演算子を使用してオブジェクトをインスタンス化できます。これには、クラスを使用する他のプログラミング言語と構文の類似点があります。

例:

<code>var trigkit4 = new Person();</code>

<font face="NSimsun">js</font> は、コンストラクター <font face="NSimsun">Person</font> を呼び出すとクラスのように見えますが、実際には関数です。これにより、クラスに基づいて呼び出すことができるいくつかの開発アイデアと継承パターンが得られます。 「クラス継承パターン」。

従来の継承モードには <font face="NSimsun">class</font> キーワードが必要です。上記のクラス継承モードは、クラスの観点から考慮する必要のないモードである <font face="NSimsun">现代继承模式</font> であると仮定します。

クラス継承パターン

次の 2 つのコンストラクター <font face="NSimsun">Parent()</font> と <font face="NSimsun">Child()</font> の例を見てください。

<code><script type="text/javascript"><br />    function Parent(name){<br />        this.name = name || 'Allen';<br />    }<br />    Parent.prototype.say = function(){<br />        return this.name;<br />    }<br />    function Child(name){}<br />    //用Parent构造函数创建一个对象，并将该对象赋值给Child原型以实现继承<br />    function inherit(C,P){<br />        C.prototype = new P();//原型属性应该指向一个对象，而不是函数<br />    }<br />    //调用声明的继承函数<br />    inherit(Child,Parent);<br /></script></code>

ステートメントを使用してオブジェクトを作成すると、次のようなプロトタイプを介して <font face="NSimsun">new Child()</font> インスタンスからその機能が取得されます。 <font face="NSimsun">Parent()</font>

<code>var kid = new Child();
kid.say();
//Allen</code>

プロトタイプチェーン

クラス継承モデルでプロトタイプ チェーンがどのように機能するかについて説明します。このメモリ ブロックには、データと他のブロックへの参照が含まれるブロックとして考えられます。

ステートメントを使用してオブジェクトを作成すると、下図の左側のようなブロックが作成されます。

メソッドにアクセスする場合は、このブロックに <font face="NSimsun">new Parent()</font> 属性が保存されます。コンストラクター <font face="NSimsun">name</font> を指す (プロトタイプ) 属性の暗黙リンク <font face="NSimsun">say()</font> は、右側のブロック <font face="NSimsun">Parent()</font> にアクセスできます。 <font face="NSimsun">prototype</font> <font face="NSimsun">__proto__</font><font face="NSimsun">Parent.prototype</font>

では、 を使用して新しいオブジェクトを作成するとどうなるでしょうか?以下に示すように:

<font face="NSimsun">var kid = new Child()</font>

ステートメントを使用して作成されたオブジェクトは、暗黙的なリンク

を除いてほとんど空です。この場合、

は、<font face="NSimsun">new Child()</font> 関数の <font face="NSimsun">__proto__</font> ステートメントを使用して作成されたオブジェクト <font face="NSimsun">__proto__</font> を指します。 <font face="NSimsun">inherit()</font><font face="NSimsun">new Parent()</font> を実行すると、左下のブロック オブジェクトには

メソッドがないため、プロトタイプ チェーンを通じて中央のブロック オブジェクトをクエリします。ただし、中央のブロック オブジェクトには メソッドのいずれかであるため、プロトタイプ チェーンに従って右端のブロック オブジェクトをクエリしたところ、このオブジェクトにはたまたま

メソッドが含まれていました。もう終わりですか？ <font face="NSimsun">kid.say()</font> <font face="NSimsun">say()</font> は、ここで実行された時点では終了していません。<font face="NSimsun">say()</font> メソッド内で参照されているのは、<font face="NSimsun">say()</font> ブロックです。このため、中央のブロックがクエリされ、中央のブロックはたまたま

属性を持ちます。この時点で、プロトタイプ チェーンのクエリは完了します。

<font face="NSimsun">say()</font>より詳細な議論については、私の記事を参照してください: <font face="NSimsun">this.name</font>JavaScript 学習ノート (5) プロトタイプとプロトタイプ チェーンの詳細な説明<font face="NSimsun">new Child()</font><font face="NSimsun">new Child()</font> <font face="NSimsun">name</font><font face="NSimsun">name</font>プロトタイプを共有

このパターンのルールは、再利用可能なメンバーはプロトタイプに配置するのではなく、プロトタイプに転送する必要があるということです。したがって、継承の目的では、継承する価値のあるものはすべてプロトタイプに実装する必要があります。したがって、次の例に示すように、子オブジェクトのプロトタイプを親オブジェクトのプロトタイプと同じに設定できます。

<code>function inherit(C,P){<br>    C.prototype = P.prototype;<br>}</code>

子对象和父对象共享同一个原型，并且可以同等的访问<font face="NSimsun">say()</font>方法。然而，子对象并没有继承<font face="NSimsun">name</font>属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例：

<code><script type="text/javascript"><br />    //要继承的对象<br />    var parent = {<br />        name : "Jack"  //这里不能有分号哦<br />    };</script></code>
<code>    //新对象<br>    var child = Object(parent);</code>
<code>    alert(child.name);//Jack<br></code>

在原型模式中，并不需要使用对象字面量来创建父对象。如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。

<code><script type="text/javascript"><br />    //父构造函数<br />    function Person(){<br />        this.name = "trigkit4";<br />    }<br />    //添加到原型的属性<br />    Person.prototype.getName = function(){<br />        return this.name;<br />    };<br />    //创建一个新的Person类对象<br />    var obj = new Person();<br />    //继承<br />    var kid = Object(obj);<br />    alert(kid.getName());//trigkit4<br /></script></code>

本模式中，可以选择仅继承现有构造函数的原型对象。对象继承自对象，而不论父对象是如何创建的，如下实例：

<code><script type="text/javascript"><br />    //父构造函数<br />    function Person(){<br />        this.name = "trigkit4";<br />    }<br />    //添加到原型的属性<br />    Person.prototype.getName = function(){<br />        return this.name;<br />    };<br />    //创建一个新的Person类对象<br />    var obj = new Person();<br />    //继承<br />    var kid = Object(Person.prototype);<br />    console.log(typeof kid.getName);//function，因为它在原型中<br />    console.log(typeof kid.name);//undefined，因为只有该原型是继承的<br /></script></code>