ホームページ ウェブフロントエンド jsチュートリアル オブジェクト指向JavaScriptによるオブジェクト作成の詳細説明

オブジェクト指向JavaScriptによるオブジェクト作成の詳細説明

May 16, 2016 pm 03:26 PM
javascript オブジェクトの作成 オブジェクト指向

私たちが作成するすべての関数にはプロトタイプ属性があります。これは、特定の型のすべてのインスタンスで共有できるプロパティとメソッドを含めることを目的としたオブジェクトです。論理的には次のように理解できます。プロトタイプは、コンストラクターを使用して作成されたオブジェクトのプロトタイプ オブジェクトです。プロトタイプを使用する利点は、すべてのオブジェクト インスタンスがそれに含まれるプロパティとメソッドを共有できることです。つまり、コンストラクターでオブジェクト情報を定義する必要はありませんが、この情報をプロトタイプに直接追加します

プロトタイプ メソッドは、オブジェクトのプロトタイプ属性を利用します。新しいオブジェクトの作成に使用されるメソッドとみなされます。ここでは、まず空のコンストラクターを使用して関数名を設定します。次に、すべてのプロパティとメソッドがプロトタイプ属性に直接割り当てられます。前の例を書き直したコードは次のとおりです。

1

2

3

4

5

6

7

8

9

10

11

12

13

function Car() { };

//将所有的属性的方法都赋予prototype属性

Car.prototype.color = "blue";

Car.prototype.doors = 4;

Car.prototype.mpg = 25;

Car.prototype.showColor = function() {

  return this.color;

};

var Car1 = new Car();

var Car2 = new Car();

document.write(Car1.showColor()+"

");//输出:blue

document.write(Car2.showColor());//输出:blue

ログイン後にコピー

このコードでは、最初にコードなしでコンストラクター Car() を定義します。次の数行のコードでは、Car のプロトタイプ プロパティにプロパティを追加することで、Car オブジェクトのプロパティを定義します。 new Car() が呼び出されると、プロトタイプのすべてのプロパティが作成されるオブジェクトに即座に割り当てられます。これは、すべての Car インスタンスが showColor() 関数へのポインターを格納することを意味します。意味的に言えば、すべてのプロパティが 1 つのオブジェクトに属しているように見えるため、以前のファクトリ メソッドとコンストラクター メソッドの問題が解決されます

さらに、このメソッドを使用すると、instanceof 演算子も使用できます。型を確認してください指定された変数が指すオブジェクトの

コードは次のとおりです:

1

document.write(Car1 instanceof Car);    //输出:tru

ログイン後にコピー

プロトタイプのアプローチは良い解決策のように思えます。残念ながら、それほど満足のいくものではありません。まず、このコンストラクターにはパラメーターがありません。プロトタイプ メソッドを使用すると、Car1 と Car2 の color 属性が「blue」に等しく、doors 属性が 4 に等しく、mpg 属性が25.つまり、オブジェクトの作成後にプロパティのデフォルト値を変更する必要があり、面倒ですが、それで終わりではありません。本当の問題は、プロパティが関数ではなくオブジェクトを指す場合に発生します。機能の共有は問題を引き起こしませんが、オブジェクトが複数のインスタンス間で共有されることはほとんどありません。次の例を考えてください:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function Car() { };//定义一个空构造函数,且不能传递参数

Car.prototype.color = "blue";

Car.prototype.doors = 4;

Car.prototype.mpg = 25;

Car.prototype.drivers = new Array("Mike","John");

Car.prototype.showColor = function() {

  return this.color;

};

var Car1 = new Car();

var Car2 = new Car();

Car1.drivers.push("Bill");

document.write(Car1.drivers+"

");//输出:Mike,John,Bill

document.write(Car2.drivers);//输出 :Mike,John,Bill

ログイン後にコピー

上記のコードでは、属性ドライバーは、「Mike」と「John」という 2 つの名前を含む Array オブジェクトへのポインターです。ドライバーは参照値であるため、Car の両方のインスタンスは同じ配列を指します。これは、値「Bill」を Car1.drivers に追加することを意味し、これは Car2.drivers にも表示されます。これらのポインタのいずれかを出力すると、文字列「Mike,John,Bill」が表示されます。オブジェクトを作成する際には非常に多くの問題があるため、オブジェクトを作成する合理的な方法はあるのだろうかと疑問に思われるはずです。答えは「はい」です。コンストラクターとプロトタイプのメソッドを組み合わせて使用​​する必要があります

コンストラクターとプロトタイプの混合メソッド (
< を使用することをお勧めします) 🎜>

コンストラクター メソッドとプロトタイプ メソッドを組み合わせることで、他のプログラミング言語と同じようにオブジェクトを作成できます。概念は非常に単純です。つまり、コンストラクターを使用してオブジェクトの非関数プロパティをすべて定義し、それを使用します。オブジェクトの機能プロパティを定義するプロトタイプ メソッド (メソッド)。その結果、すべての関数が 1 回だけ作成され、各オブジェクトは独自のオブジェクト プロパティ インスタンスを次のように書き換えます。


これで、通常のオブジェクトの作成に似てきました。関数以外のプロパティはすべてコンストラクターで作成されます。つまり、プロパティのデフォルト値をオブジェクトのパラメーターに割り当てることができます。 showColor() 関数のインスタンスは 1 つだけ作成されるため、メモリの無駄がありません。また、Car1 のドライバー配列に「Bill」値を追加しても、これらの値を出力するときに Car2 の配列には影響しません。配列では、Car1.drivers には「Mike, John, Bill」が表示され、Car2.drivers には「Mike, John」が表示されます。プロトタイプ メソッドが使用されているため、instanceof 演算子を使用して

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function Car(Color,Doors,Mpg) {

 this.color = Color;

 this.doors = Doors;

 this.mpg = Mpg;

 this.drivers = new Array("Mike","John");

};

Car.prototype.showColor = function() {

   return this.color;

};

var Car1 = new Car("red",4,23);

var Car2 = new Car("blue",3,25);

Car1.drivers.push("Bill");

document.write(Car1.drivers+"

");//输出:Mike,John,Bill

documnet.write(Car2.drivers);//输出:Mike,John

ログイン後にコピー
を決定できます。
このメソッドは ECMAScript で使用される主なメソッドであり、他のメソッドもあります。ただし、一部の開発者は、他の言語に慣れている開発者にとって、このメソッドはまだ完璧ではないと感じています。結局のところ、ほとんどのオブジェクト指向言語では、クラスを定義するときにプロパティとメソッドを視覚的に表現します。

<🎜。 >

Java很好地打包了Car类的所有属性和方法,因此看见这段代码就知道它要实现什么功能,它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为,在构造函数内部找属性,在其外部找方法的做法不合逻辑。因此,他们设计了动态原型方法,以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

function Car(Color,Doors,Mpg) {

 this.color = Color;

 this.doors = Doors;

 this.mpg = Mpg;

 this.drivers = new Array("Mike","John");

 //如果Car对象中的_initialized为undefined,表明还没有为Car的原型添加方法

 if (typeof Car._initialized == "undefined") {

   Car.prototype.showColor = function() {

    return this.color;

   };

   Car._initialized = true; //设置为true,不必再为prototype添加方法

 }

}

var Car1 = new Car("red",4,23);//生成一个Car对象

var Car2 = new Car("blue",3,25);

Car1.drivers.push("Bill");//向Car1对象实例的drivers属性添加一个元素

document.write(Car1.drivers+"

");//输出:Mike,John,Bill

document.write(Car2.drivers);//输出:Mike,John

ログイン後にコピー

 直到检查typeof Car._initialize是否等于"undefined"之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized设置为true。如果这个值定义了(它的值为 true时,typeof 的值为Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,传统的 OOP开发者会高兴地发现,这段代码看起来更像其他语言中的类定义了。 

我们应该采用哪种方式呢?      

如前所述,目前使用最广泛的是混合的构造函数/原型方式。此外,动态原型方式也很流行,在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。总之JS是基于面向对象的一门客户端脚本语言,我们在学习它的面向对象技术的时候要的留意JS与其他严谨性高的程序语言的不同。也要正确使用JS创建对象的合理的方式,推荐使用构造函数与原型方式的混合方式创建对象实例。这样可以避免许多不必要的麻烦。

以上就是JavaScript基于面向对象之创建对象的全部内容,希望对大家的学习有所帮助。

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

ActiveX コンポーネントがオブジェクトを作成できない問題を解決する方法 ActiveX コンポーネントがオブジェクトを作成できない問題を解決する方法 Jan 24, 2024 pm 02:48 PM

解決策: 1. スペルとパスを確認する; 2. コンポーネントへの参照を追加する; 3. レジストリを確認する; 4. 管理者として実行する; 5. Office を更新または修復する; 6. セキュリティ ソフトウェアを確認する; 7. 他のバージョンのコンポーネントを使用する; 8. 表示するエラー メッセージ; 9. 他の解決策を見つけます。詳細な紹介: 1. スペルとパスを確認します: オブジェクトの名前とパスにスペル エラーがないこと、およびファイルが指定されたパスに存在することを確認します; 2. コンポーネントへの参照を追加します。

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

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

Go でオブジェクト指向プログラミングを探索する Go でオブジェクト指向プログラミングを探索する Apr 04, 2024 am 10:39 AM

Go 言語は、型定義とメソッドの関連付けを通じてオブジェクト指向プログラミングをサポートします。従来の継承はサポートされていませんが、合成を通じて実装されます。インターフェイスは型間の一貫性を提供し、抽象メソッドを定義できるようにします。実際の事例では、顧客操作の作成、取得、更新、削除など、OOP を使用して顧客情報を管理する方法を示します。

PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス PHP の高度な機能: オブジェクト指向プログラミングのベスト プラクティス Jun 05, 2024 pm 09:39 PM

PHP における OOP のベスト プラクティスには、命名規則、インターフェイスと抽象クラス、継承とポリモーフィズム、依存関係の注入が含まれます。実際のケースには、ウェアハウス モードを使用してデータを管理する場合や、ストラテジー モードを使用して並べ替えを実装する場合などがあります。

Golang にはクラスのようなオブジェクト指向機能はありますか? Golang にはクラスのようなオブジェクト指向機能はありますか? Mar 19, 2024 pm 02:51 PM

Golang (Go 言語) には伝統的な意味でのクラスの概念はありませんが、構造体と呼ばれるデータ型が提供され、これによってクラスと同様のオブジェクト指向機能を実現できます。この記事では、構造体を使用してオブジェクト指向機能を実装する方法を説明し、具体的なコード例を示します。構造体の定義と使用法 まず、構造体の定義と使用法を見てみましょう。 Golang では、type キーワードを通じて構造を定義し、必要に応じて使用できます。構造には属性を含めることができます

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

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

Go言語のオブジェクト指向機能の分析 Go言語のオブジェクト指向機能の分析 Apr 04, 2024 am 11:18 AM

Go 言語は、オブジェクト指向プログラミング、構造体によるオブジェクトの定義、ポインター レシーバーを使用したメソッドの定義、インターフェイスによるポリモーフィズムの実装をサポートしています。オブジェクト指向の機能は、Go 言語でのコードの再利用、保守性、カプセル化を提供しますが、クラスや継承、メソッド シグネチャ キャストといった従来の概念が欠如しているなどの制限もあります。

PHP オブジェクト指向プログラミングの深い理解: オブジェクト指向プログラミングのデバッグ手法 PHP オブジェクト指向プログラミングの深い理解: オブジェクト指向プログラミングのデバッグ手法 Jun 05, 2024 pm 08:50 PM

オブジェクトのステータスの追跡、ブレークポイントの設定、例外の追跡を習得し、xdebug 拡張機能を利用することで、PHP オブジェクト指向プログラミング コードを効果的にデバッグできます。 1. オブジェクトのステータスを追跡する: var_dump() と print_r() を使用して、オブジェクトの属性とメソッドの値を表示します。 2. ブレークポイントの設定: 開発環境にブレークポイントを設定すると、実行がブレークポイントに到達するとデバッガが一時停止するため、オブジェクトのステータスを簡単に確認できます。 3. 例外のトレース: try-catch ブロックと getTraceAsString() を使用して、例外発生時のスタック トレースとメッセージを取得します。 4. デバッガーを使用します。xdebug_var_dump() 関数は、コードの実行中に変数の内容を検査できます。

See all articles