ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript のプロトタイプ パターンについての簡単な説明

JavaScript のプロトタイプ パターンについての簡単な説明

高洛峰
高洛峰オリジナル
2016-11-25 09:27:451135ブラウズ

JavaScript でオブジェクトを作成するには、ファクトリ モード、コンストラクタ モード、プロトタイプ モードなど、さまざまな方法があります:

//ファクトリ モード <br>function createperson( name,age,job)<br>{<br> var o = 新しいオブジェクト;<br> o.name = 名前;<br> o.age = 年齢;<br> o.job = job;<br> o.sayName = function()<br> {<br> アラート(this .name);<br> }<br> return o;<br>}<br>var person = createperson('dw',20,'IT');<br><p><br></p><p><br></p><p><br></p><p>同等のプロトタイプパターン: </p><p> </p><p>function person()<br>{<br><br>}<br>person.prototype = <br>{<br>名前:"dw",<br>年齢:20,<br>仕事:"IT",<br>sayName:function()<br> {<br>alert(this. name);<br> }<br>};<br>var person2 = new Person;<br><br> Javascript では、各関数にはプロトタイプ属性があり、これはプロトタイプ オブジェクトへのポインターであり、すべてのインスタンスで共有される属性の合計を作成するために使用できます。方法。プロトタイプ モードでは、インスタンス person3</p><p><br></p><p></p><p>var person3 = new Person;<br>person2.name; //dw<br><br>person3 の name 属性は両方とも dw を返します。プロトタイプ オブジェクトのプロパティとメソッドは、特定の型のすべてのインスタンスによって共有されます。デフォルトでは、各プロトタイプ オブジェクトはコンストラクター属性を自動的に取得します。この属性は、プロトタイプ属性が配置されている関数へのポインターを指すために使用されます。たとえば、 Person.prototype.constructor は Person<br></p><p><br></p><p></p>alert( Person.prototype.constructor) ; // Person のコンストラクターを返します<p> // person.prototype.constructor は Person への単なるポインタであり、 Person<br> と等しくありません // 以下は false を返します<br>alert(person.prototype.constructor) === 人)<br>alert (person.prototype.constructor == 人)<br><br> インスタンス、プロトタイプオブジェクト、コンストラクター間の三角関係は下図のとおりです。 <br></p><p><img src="https://img.php.cn//upload/image/628/727/400/1480037228955873.png" title="1480037228955873.png" alt="JavaScript のプロトタイプ パターンについての簡単な説明"></p> 各インスタンスの内部には、 ECMA では、プロトタイプ オブジェクトを指すポインター。262 の 5 番目のバージョンは [[プロトタイプ]] と呼ばれます。プロトタイプ モードで作成されたインスタンスには、コンストラクターとの直接の関係はありません。 <p></p><p><br></p> [[prototype]] にはアクセスできませんが、isPrototypeOf() メソッドを使用して、オブジェクトがプロトタイプ オブジェクトかどうかを判断できます。 <p></p><p></p>alert(person.prototype.isPrototypeOf(person2)); //true<p>alert(person.prototype.isPrototypeOf(person3));//true<br><br> インスタンス内に Person.prototype へのポインタがあるため、したがって、それらはすべて true を返します。 ECMAScript 5 では、Object.getPrototypeOf() を使用して [[prototype]]、つまりプロトタイプ オブジェクト <br></p><p><br></p><p></p>alert(Object.getPrototypeOf(person2) == Person.prototype) / を返すことができます。 /true<p>alert (Object.getPrototypeOf(person2).name); //dw<br><br> 注: インスタンスを使用してプロトタイプの値にアクセスすることはできますが、インスタンスを通じてプロトタイプの値を上書きすることはできません。 、プロトタイプと同じ名前の属性がインスタンスに追加され、同じ名前のプロトタイプの属性がブロックされます。 <br></p><p><br></p><p></p>person2.name="qs";<p>alert(person2.name);//qs<br><br> name 属性が null に設定されている場合でも、プロトタイプ内の名前にはアクセスできません。 delete を使用してインスタンスの name 属性を削除すると、プロトタイプ内の名前を再確認できます。<br></p><p><br></p><p></p><pre name="code" class="html">person2.name = null;<p>alert(person2 .name); //null<br>delete person2.name;alert(person2.name); //dw<br><br><br></p><p><br></p><p> 同じ名前のプロパティの場合は、hasOwnProperty を使用できます。 ("propertyName") メソッドは、プロパティがインスタンスに属しているかプロトタイプに属しているかを検出します。このメソッドは、指定されたプロパティがインスタンスに存在する場合にのみ true を返します<br></p><p><br></p>
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。