JavaScriptコードの再利用パターンを詳しく解説_基礎知識-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:32:00

オリジナル

1483 人が閲覧しました

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

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

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

ログイン後にコピー

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

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

例:

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

ログイン後にコピー

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

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

クラス継承パターン

次の 2 つのコンストラクター Parent() と Child() の例を見てください。

<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>

ログイン後にコピー

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

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

ログイン後にコピー

プロトタイプチェーン

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

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

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

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

var kid = new Child()

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

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

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

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

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

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

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

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

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

ログイン後にコピー

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

原型继承

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

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

ログイン後にコピー