ホームページ > ウェブフロントエンド > jsチュートリアル > JSprototype オブジェクトの使用チュートリアル

JSprototype オブジェクトの使用チュートリアル

php中世界最好的语言
リリース: 2018-04-18 16:40:24
オリジナル
1550 人が閲覧しました

今回は、JSprototype オブジェクトの使い方についてのチュートリアルをお届けします。JSprototype オブジェクトを使用する際の 注意事項 について、実際の事例を見てみましょう。

プロトタイプを通じて複数のインスタンス間でのメソッド共有の問題を解決しました。次に、プロトタイプとプロトタイプ チェーンの詳細を理解します。

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');
ログイン後にコピー

1. 各関数にはプロトタイプ属性 (prototype) があり、上の図の最初の緑色の線に示すように、コンストラクター関数のプロトタイプ オブジェクト (CreateObj.prototype) を指すポインターです。 2. デフォルトでは、すべてのプロトタイプ オブジェクトは自動的にコンストラクター属性を取得します。この属性の機能には、上の図の 2 番目の緑色の線など、プロトタイプ属性を指す関数が含まれています

。 3. すべてのインスタンス (新しいコンストラクターを通じて作成されたプロトタイプ オブジェクト (CreateObj.prototype、上の図は描いていません) など) には、暗黙的なプロトタイプ (

proto

) が含まれています。インスタンス、プロトタイプ オブジェクト 上の図の 3 行目と 4 行目に示されているように、obj1 のコンストラクターは CreateObj であり、CreateObj のプロトタイプ オブジェクトは CreateObj.prototype です。したがって、次のようになります。 obj1.proto === CreateObj.prototype //true

obj2.proto === CreateObj.prototype //true

4. 描画プロセス中に、これに値を割り当てる

プロパティとメソッド

をコンストラクターに記述します。たとえば、userName はオブジェクトに割り当てられる属性なので、2 つのオブジェクト obj1 と obj2 に描画されます。 userName 属性があります

5. プロトタイプ オブジェクトに記述されたメソッドまたは属性は、

などのプロトタイプ オブジェクト上に描画される必要があります。 画像の CreateObj.prototype の上にメソッド showUserName を描画する必要があります

6. オブジェクトがプロパティとメソッドにアクセスするとき、そのアクセス ルールが呼び出されます (近接原則)。ルールは次のとおりです。 インスタンスに属性またはメソッドがある場合は、それらをインスタンスで直接使用します

インスタンスにプロパティまたはメソッドがない場合、インスタンスのプロト ポインターが指すプロトタイプ オブジェクトに沿って検索が続行され、見つからない場合、値は未定義になります。 showUserName メソッドは obj1 と obj2 には存在しないため、プロトに従って CreateObj.prototype プロトタイプ オブジェクトの showUser

Name メソッドを見つけます

CreateObj.prototype プロトタイプ オブジェクトの showUserName をコメント アウトすると、obj1.showUserName と obj2.showUserName がエラーを報告します

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄
ログイン後にコピー
// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }
ログイン後にコピー

コンストラクターでこれに showUserName メソッドを追加すると、obj1 と obj2 はこれを直接呼び出します。これら 2 つのメソッドは図のインスタンスに描画されるため、次のようになります。 これで、複数のインスタンスの属性とメソッドをコンストラクターのプロトタイプオブジェクトに記述することで共有する原理が理解できるはずです

プロトタイプチェーンとは何ですか? 前に、すべてのインスタンス (プロトタイプ オブジェクトを含む) には暗黙のプロトタイプ プロトがあると述べましたが、CreateObj.prototype のプロトタイプ オブジェクトは誰を指すのでしょうか?

りー

CreateObj.prototype.proto は Object.prototype を指します。これは、合同演算子

(===) テストに合格した後は true

になります Object.prototype.proto は NULL を指しています

これはプロトタイプ チェーンです。一部のコンストラクターは、暗黙的なプロトタイプを通じてレイヤーごとに連結されています。なぜカスタム オブジェクトが toString、valueOf、およびその他のメソッドを呼び出せるのかがわかります。

すべてのオブジェクトは Object から継承されるためです。

この記事のケースを読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

react-router4.0はリダイレクトと404関数を実装

jsで要素スタイルを設定する手順の詳細な説明

JSのソート方法のまとめ

以上がJSprototype オブジェクトの使用チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート