ホームページ ウェブフロントエンド jsチュートリアル JavaScriptにおけるインスタンスオブジェクトとプロトタイプオブジェクトの例_基礎知識

JavaScriptにおけるインスタンスオブジェクトとプロトタイプオブジェクトの例_基礎知識

May 16, 2016 pm 03:11 PM
javascript プロトタイプ インスタンスオブジェクト 物体

まず最初に宣言します: JavaScript のすべてのオブジェクトにはコンストラクター属性とプロトタイプ属性があります。 constructor はオブジェクトのコンストラクターを指し、prototype はコンストラクターを使用して作成されたオブジェクト インスタンスのプロトタイプ オブジェクトを指します。

function Person(){ 
  
 } 
var person = new Person(); 
 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
 } 
  
person.sayName(); 
ログイン後にコピー

このコードではエラーが報告されます。sayName() が定義されていません。 『JavaScript Advanced Programming Second Edition』によると、オーバーライドされたプロトタイプによってコンストラクターと元のプロトタイプ間の接続が切断されるためです。ただし、上記のステートメントの順序を調整してみましょう。以下のように:

function Person(){ 
 } 
//var person = new Person(); 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
} 
/*===========================================================*/ 
var person = new Person(); 
/*===========================================================*/ 
 person.sayName(); // zxs 
alert(person.constructor) //function Object() { [native code]} or function Person() {} 取决与蓝色的语句是否有效 
ログイン後にコピー

上記の 2 つのコード内の等号間のステートメントに注意してください。 2 番目の段落の順序でコードを記述すると、「zxs」が出力されます。この結果は、最初のケースで報告されたエラーが、コンストラクターと元のアイデアの間の接続が切断されたことによって発生したことを意味するものではないことを示しています。 。

Person.prototype = {} 
ログイン後にコピー

これはもともとオブジェクトを定義する方法であり、JavaScript の各オブジェクトのコンストラクター属性はデフォルトで Object コンストラクターを指します。これは、プロトタイプ オブジェクトを書き換えるとコンストラクターとコンストラクターの間の接続が切断されることを示すのは難しくありません。元のプロトタイプの接続ですが、この接続が切断された後はsayName()関数にアクセスできなくなるわけではありません。

ここで、次の仮定があります。関数のプロトタイプ属性が指すプロトタイプ オブジェクトは、表示する新しく作成されたプロトタイプ オブジェクトとまったく同じではありません。関数を呼び出すと、まずプロトタイプ オブジェクトが現在の環境に存在するかどうかを確認し、存在しない場合は作成します。最後に、検索結果に基づいてプロトタイプ オブジェクトが返されます。このオブジェクトのプロパティとメソッドは、常にデフォルトのプロトタイプのプロパティとメソッド、つまり、で定義されているプロパティとメソッドを使用します。コンストラクター。呼び出されたメソッドまたはプロパティがデフォルトのプロトタイプに存在しない場合は、Person.prototype = {} で定義されたプロパティおよびメソッドが使用されます。

JavaScript はインタープリタ言語であり、ステートメントは順番に実行されます。コードの最初の部分では、 new キーワードを使用して新しいオブジェクトを作成するときに、 Person.prototype = {} は実行されません。これは、メソッドと定義されているプロパティが現在の実行環境に見つからず、メソッドがコンストラクターに存在しないため、エラーが発生します。変数と同様、値を代入する際にプログラムが実行されていない状態では使用できません。 2 番目の段落では、呼び出されたメソッドがすでに環境に存在しており、コンストラクターのプロトタイプ オブジェクトが作成されているため、結果を取得できます。

次のプログラムを見てください:

////////////////////////////////////////////////////////////////////////// 
 
function Person(){} 
 
/*===========================================================*/ 
 
 var person = new Person(); 
Person.prototype.name = 'song'; 
 
/*===========================================================*/ 
 
//Person.prototype.sayName = function(){alert(this.name)}; 
Person.prototype = { 
constructor : Person, 
name : 'zxs', 
age : 24, 
sayName : function(){alert(this.name)} 
} 
person.sayName(); // error 
 
////////////////////////////////////////////////////////////////////////// 
 
function Person(){  } 
/*var person = new Person();*/ 
Person.prototype.name = 'song';  
/*Person.prototype.sayName = function(){alert(this.name)};*/ 
Person.prototype = {   
constructor : Person, 
  name : 'zxs', 
  age : 24, 
  sayName : function(){alert(this.name)} 
} 
 
/*===========================================================*/ 
var person = new Person(); 
 
/*===========================================================*/ 
person.sayName(); // zxs 
ログイン後にコピー

ここから、 Person.prototype.name = '' を使用すると、オブジェクト リテラルとこのメソッドで定義されたプロトタイプ オブジェクトの両方がある場合、オブジェクトが作成された場所に関係なくアクセスできることがわかります。定義されたオブジェクトが最終値として使用されます。また、プロトタイプ オブジェクトのオブジェクト リテラル定義を使用した後、オブジェクトにアクセスするには、オブジェクトを作成するステートメントの前にその定義を指定する必要があります。

インスタンスは、プロトタイプ オブジェクトのプロパティやメソッドにアクセスできません。特に、プロトタイプ オブジェクトをオーバーライドするとコンストラクターと元のプロトタイプ間の接続が切断されるためです。

function Person(){  
    
  }  
var person = new Person();  
  
Person.prototype = {  
  //constructor : Person,  
  name : 'zxs',  
  age : 24,  
  sayName : function(){alert(this.name)}  
  }  
    
person.sayName();  
ログイン後にコピー

上記のコードのコンストラクター関数のプロトタイプは、オブジェクトのインスタンス化時には空であり、デフォルトのプロパティ以外のプロパティはありません。コンストラクターのプロトタイプをオーバーライドすると、コンストラクターと元のプロトタイプの間の接続が切断されます。

new 演算子を使用した後、コンストラクターのプロトタイプ オブジェクトのプロパティとメソッドが person オブジェクトに追加されました。上記のメソッドは関数プロトタイプに新しいプロパティやメソッドを追加する際に動的ではないため、人は新しく追加されたプロパティやメソッドにアクセスできません。

プロトタイプ オブジェクトを書き直すと、次のコードのようになります:

var o = { 
  name : 'zxs' 
  } 
   
var obj = o; 
o = {} 
console.log(o.name);  
ログイン後にコピー

オブジェクトは参照型、「=」は代入演算子、演算順序は右から左となるため、この時の出力値は不定となります。 o={} は、o の点が変更され、空のオブジェクトであることを意味します。
Person.prototype.mothed = function() {} と Person.prototype={mothed:function(){}} の違いは、arr = [] と arr.push() と同じです。一方、後者は自分自身を完全に変えます。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

MySQLクエリ結果の配列をオブジェクトに変換するにはどうすればよいですか? MySQLクエリ結果の配列をオブジェクトに変換するにはどうすればよいですか? Apr 29, 2024 pm 01:09 PM

MySQL クエリ結果の配列をオブジェクトに変換する方法は次のとおりです。 空のオブジェクト配列を作成します。結果の配列をループし、行ごとに新しいオブジェクトを作成します。 foreach ループを使用して、各行のキーと値のペアを新しいオブジェクトの対応するプロパティに割り当てます。新しいオブジェクトをオブジェクト配列に追加します。データベース接続を閉じます。

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Golang でのポインター変換のベスト プラクティスの例を学ぶ Golang でのポインター変換のベスト プラクティスの例を学ぶ Feb 24, 2024 pm 03:51 PM

Golang は、さまざまなアプリケーションやサービスの開発に使用できる強力で効率的なプログラミング言語です。 Golang では、ポインタは非常に重要な概念であり、データをより柔軟かつ効率的に操作するのに役立ちます。ポインタ変換とは、異なる型間のポインタ操作のプロセスを指します。この記事では、具体的な例を使用して、Golang におけるポインタ変換のベスト プラクティスを学びます。 1. 基本概念 Golang では、各変数にはアドレスがあり、アドレスはメモリ内の変数の位置です。

PHP における配列とオブジェクトの違いは何ですか? PHP における配列とオブジェクトの違いは何ですか? Apr 29, 2024 pm 02:39 PM

PHP では、配列は順序付けられたシーケンスであり、要素はインデックスによってアクセスされます。オブジェクトは、new キーワードによって作成されたプロパティとメソッドを持つエンティティです。配列へのアクセスはインデックス経由で、オブジェクトへのアクセスはプロパティ/メソッド経由で行われます。配列値が渡され、オブジェクト参照が渡されます。

PHP 関数はどのようにオブジェクトを返すのでしょうか? PHP 関数はどのようにオブジェクトを返すのでしょうか? Apr 10, 2024 pm 03:18 PM

PHP 関数は、return ステートメントに続いてオブジェクト インスタンスを使用してオブジェクトを返すことにより、データをカスタム構造にカプセル化できます。構文: functionget_object():object{}。これにより、カスタム プロパティとメソッドを使用してオブジェクトを作成し、オブジェクトの形式でデータを処理できるようになります。

C++ 関数がオブジェクトを返すときは何に注意する必要がありますか? C++ 関数がオブジェクトを返すときは何に注意する必要がありますか? Apr 19, 2024 pm 12:15 PM

C++ では、関数がオブジェクトを返すときに注意する点が 3 つあります。 オブジェクトのライフサイクルは、メモリ リークを防ぐために呼び出し元によって管理されます。ぶら下がりポインタを回避し、動的にメモリを割り当てるかオブジェクト自体を返すことにより、関数が戻った後もオブジェクトが有効なままであることを確認します。コンパイラーは、パフォーマンスを向上させるために、返されたオブジェクトのコピー生成を最適化する場合がありますが、オブジェクトが値セマンティクスによって渡される場合、コピー生成は必要ありません。

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

PHP の Request オブジェクトとは何ですか? PHP の Request オブジェクトとは何ですか? Feb 27, 2024 pm 09:06 PM

PHP の Request オブジェクトは、クライアントからサーバーに送信される HTTP リクエストを処理するために使用されるオブジェクトです。 Request オブジェクトを通じて、リクエストを処理して応答するために、リクエスト メソッド、リクエスト ヘッダー情報、リクエスト パラメータなどのクライアントのリクエスト情報を取得できます。 PHP では、$_REQUEST、$_GET、$_POST などのグローバル変数を使用して、要求された情報を取得できますが、これらの変数はオブジェクトではなく配列です。リクエスト情報をより柔軟かつ便利に処理するために、次のことができます。

See all articles