ホームページ ウェブフロントエンド jsチュートリアル JavaScript のオブジェクト指向とプロトタイプ関数の詳細な分析_JavaScript スキル

JavaScript のオブジェクト指向とプロトタイプ関数の詳細な分析_JavaScript スキル

May 16, 2016 pm 03:16 PM

オブジェクトは JavaScript において非常に重要な要素です。オブジェクトを完全に理解できるかどうかは、JavaScript システム全体の基本的な理解に直接関係します。端的に言えば、JavaScript はオブジェクトの集まりです。 。 (ビープ!)。

以下では、一般的に使用されるオブジェクト作成モードをいくつか紹介します

新しいキーワードを使用して作成

オブジェクト作成の最も基本的な方法は、他のほとんどの言語と同じです。オブジェクトは存在しないので、新しいオブジェクトを作成します。

var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); }
ログイン後にコピー

リテラルを使用して作成

これは適切だと思われますが、変数を定義するこのような複雑で控えめな方法がオタクに好まれるのでしょうか? スクリプト言語として、他の言語と同じスタイルを持つ必要があるため、オブジェクト リテラルの定義方法が登場しました:

var gf = { name : "tangwei", bar : "c++", sayWhat : function() { console.log(this.name + "said:love you forever"); } }
ログイン後にコピー

工場出荷時モード

実際、これはオブジェクトを定義するために実際に最も一般的に使用される方法ですが、同様のプロパティを持つオブジェクトを多数持ちたいと考えています (考えるのはとても楽しいです...) どうすればよいでしょうか?それらを 1 つずつ定義すると、大量のコードが生成されることになるため、ファクトリを構築してオブジェクトをバッチで生成してみてはいかがでしょうか。したがって、JavaScript の世界初のインフレータブル ベイビーが誕生します。 。 。いいえ、「ファクトリーモデル」が誕生しました!

function createGf(name, bar) { var o = new Object(); o.name = name; o.bar = bar; o.sayWhat = function() { alert(this.name + "said:love you forever"); } return o; } var gf1 = createGf("bingbing","d"); var gf2 = createGf("mimi","a");
ログイン後にコピー

コンストラクター

ファクトリ パターンは、複数の同様のオブジェクトを作成する問題を解決しますが、これらのオブジェクトはすべてオブジェクトから作成されるという問題が再び発生します。現時点では、別のモード、コンストラクター モードに切り替える必要があります:

function Gf(name,bar){ this.name = name; this.bar = bar; this.sayWhat = function(){ alert(this.name + "said:love you forever"); } } var gf1 = new Gf("vivian","f"); var gf2 = new Gf("vivian2","f");
ログイン後にコピー

ここでは、上の例の createGf を置き換えるために大文字で始まるコンストラクターを使用します。規則に従って、コンストラクターの最初の文字は大文字にする必要があることに注意してください。ここでは、新しいオブジェクトを作成し、コンストラクターのスコープを新しいオブジェクトに割り当て、コンストラクター内のメソッドを呼び出します。

上記のメソッドには何の問題もないように見えますが、2 つのインスタンスで呼び出されるコンストラクター内のsayWhat メソッドが同じ Function インスタンスではないことがわかります:

console.log(gf1.sayWhat == gf2.sayWhat); //false
ログイン後にコピー

同じメソッドを呼び出しても、異なるインスタンスを宣言するのはリソースの無駄です。コンストラクターの外側で、sayWhat 関数を最適化して宣言できます:

function Gf(name,bar){ this.name = name; this.bar = bar; this.sayWhat = sayWhat } function sayWhat(){ alert(this.name + "said:love you forever"); }
ログイン後にコピー

これにより、複数のインスタンスが同じメソッド インスタンスを複数回定義する問題は解決されますが、定義したsayWhat はグローバル スコープ メソッドですが、このメソッドを直接呼び出すことはできません。これは少し矛盾しています。特定のカプセル化プロパティを持つオブジェクトをよりエレガントに定義するにはどうすればよいでしょうか? JavaScript プロトタイプ オブジェクト パターンを見てみましょう。

プロトタイプ オブジェクト パターン

プロトタイプ オブジェクトを理解する

関数を作成すると、その関数には、コンストラクターを通じて作成された関数のプロトタイプ オブジェクトを指すプロトタイプ属性が含まれます。平たく言えば、プロトタイプ オブジェクトは、他のオブジェクトに共有プロパティとメソッドを提供するメモリ内のオブジェクトです。

プロトタイプ モードでは、コンストラクターでインスタンス属性を定義する必要はなく、属性情報をプロトタイプ オブジェクトに直接割り当てることができます。

function Gf(){ Gf.prototype.name = "vivian"; Gf.prototype.bar = "c++"; Gf.prototype.sayWhat = function(){ alert(this.name + "said:love you forever"); } } var gf1 = new Gf(); gf1.sayWhat(); var gf2 = new Gf();
ログイン後にコピー

コンストラクターとの違いは、ここでの新しいオブジェクトのプロパティとメソッドがすべてのインスタンスで共有できることです。つまり、gf1 と gf2 は同じプロパティとメソッドにアクセスします。プロトタイプ オブジェクトに割り当てる属性に加えて、いくつかの組み込み属性もあります。すべてのプロトタイプ オブジェクトには、プロトタイプ属性を含む関数へのポインターであるコンストラクター属性があります (さらに詳しく説明します)。この舌を巻くプロセスを写真でわかりやすく理解してみましょう:

すべてのオブジェクトにはプロトタイプ オブジェクト (プロトタイプ) があります。プロトタイプ オブジェクトには、プロトタイプ属性を含む関数を指すコンストラクター属性があります。Gf インスタンス gf1 と gf2 には両方とも、プロトタイプ オブジェクトを指す内部属性が含まれています (Firefox ブラウザーで表示)。はプライベート プロパティ プロトです)、オブジェクト内のプロパティにアクセスするときは、まずそのプロパティがインスタンス オブジェクトに存在するかどうかを尋ね、存在しない場合はプロトタイプ オブジェクトを探し続けます。

プロトタイプ オブジェクトを使用する

前の例では、プロトタイプ オブジェクトに属性を追加するときに、各オブジェクトに Gf.prototype を追加する必要があることがわかりました。上記のオブジェクト作成モードでは、リテラルを使用できることがわかりました。オブジェクトを作成します。ここで改善することもできます:

function Gf(){} Gf.prototype = { name : "vivian", bar : "c++", sayWhat : function(){ alert(this.name + "said:love you forever"); } }

ログイン後にコピー

ここで特別な注意が必要な点が 1 つあります。関数が定義されるたびに、このオブジェクトも同時にプロトタイプ オブジェクトが作成されるため、コンストラクター属性はオブジェクト Gf を指さなくなりました。新しいコンストラクター属性を取得します。これは、Gf.prototype を使用して元のプロトタイプ オブジェクトを本質的に上書きするため、コンストラクターは新しいオブジェクトのコンストラクター プロパティになり、Gf ではなく Object:

を指します。
var gf1 = new Gf(); console.log(gf1.constructor == Gf);//false console.log(gf1.constructor == Object)//true
ログイン後にコピー

一般情况下,这个微妙的改变是不会对我们造成影响的,但如果你对constructor有特殊的需求,我们也可以显式的指定下Gf.prototype的constructor属性:

Gf.prototype = { constructor : Gf, name : "vivian", bar : "c++", sayWhat : function() { alert(this.name + "said:love you forever"); } } var gf1 = new Gf(); console.log(gf1.constructor == Gf);//true
ログイン後にコピー

通过对原型对象模式的初步了解,我们发现所有的实例对象都共享相同的属性,这是原型模式的基本特点,但往往对于开发者来说这是把“双刃剑”,在实际开发中,我们希望的实例应该是具备自己的属性,这也是在实际开发中很少有人单独使用原型模式的主要原因。

构造函数和原型组合模式

在实际开发中,我们可以使用构造函数来定义对象的属性,使用原型来定义共享的属性和方法,这样我们就可以传递不同的参数来创建出不同的对象,同时又拥有了共享的方法和属性。

function Gf(name,bar){ this.name = name; this.bar = bar; } Gf.prototype = { constructor : Gf, sayWhat : function() { alert(this.name + "said:love you forever"); } } var gf1 = new Gf("vivian", "f"); var gf2 = new Gf("vivian1", "c");
ログイン後にコピー

在这个例子中,我们再构造函数中定义了对象各自的属性值,在原型对象中定义了constructor属性和sayWhat函数,这样gf1和gf2属性之间就不会产生影响了。这种模式也是实际开发中最常用的对象定义方式,包括很多JS库(bootstrap等)默认的采用的模式。

以上所述是小编给大家介绍的JavaScript面向对象和原型函数,希望对大家有所帮助。

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

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call()、apply()、bind()などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

ソースビューアーでjQueryの知識を向上させます ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです

モバイル開発用のモバイルチートシート10個 モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません! タッチジェスチャーリファレンスガイド(PDF) Desigの貴重なリソース

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

See all articles