ホームページ ウェブフロントエンド jsチュートリアル Javascript学習メモ - 関数(5):Constructor_基礎知識

Javascript学習メモ - 関数(5):Constructor_基礎知識

May 16, 2016 pm 04:30 PM
javascript

JavaScript のコンストラクターも他の言語とは異なります。 new キーワードを使用して呼び出された関数はすべてコンストラクターとして使用できます。
コンストラクター本体内で、これは新しく作成されたオブジェクトを指します。コンストラクター本体に return 式が表示されていない場合は、デフォルトでこれ (新しく作成されたオブジェクト) が返されます。

コードをコピーします コードは次のとおりです:

関数 Foo() {
This.bla = 1;
}
Foo.prototype.test = function() {
console.log(this.bla);
};
var test = new Foo();

上記のコードは、コンストラクターとして Foo を呼び出し、新しいオブジェクトのプロトタイプ (__proto__) を Foo.prototype にポイントします。
コンストラクター内で return 式を定義すると、コンストラクターは式全体を返しますが、この return 式はオブジェクトである必要があります。

コードをコピーします コードは次のとおりです:

関数 Bar() {
2 を返します;
}
new Bar(); // 新しいオブジェクト
関数 Test() {
This.value = 2;
戻り値 {
foo: 1
};
}
new Test(); // 返されたオブジェクト

new が省略された場合、関数は新しいオブジェクトを返すことができません。

コードをコピーします コードは次のとおりです:

関数 Foo() {
This.bla = 1 // グローバル オブジェクトに設定されます
; }
Foo(); // 未定義

上記の例は一部のシナリオでも機能する可能性がありますが、JavaScript の動作メカニズムにより、これはグローバル オブジェクトを指します。

工場出荷時モード

キーワード new を使用せずに済むようにするには、コンストラクターは明示的に値を返す必要があります。

コードをコピーします コードは次のとおりです:

関数 Bar() {
var 値 = 1;
戻り値 {
メソッド: function() {
戻り値;
}
}
}
Bar.prototype = {
foo: function() {}
};
new Bar();
Bar();

上記の例では、new を使用せずに関数 Bar を呼び出した場合と同じで、メソッドメソッドを含む新しく作成されたオブジェクトが返されます。これは実際にはクロージャです。
ここで注意すべき点の 1 つは、 new Bar() は Bar.prototype を返すのではなく、return 式内の関数メソッドのプロトタイプ オブジェクトを返すということです。
上記の例では、new を使用するかどうかに機能的な違いはありません。

ファクトリ パターンを通じて新しいオブジェクトを作成する

new の使用を忘れるとエラーが発生するため、new を使用しないようにとよく注意されます。
オブジェクトを作成するには、ファクトリ パターンを使用し、ファクトリ パターン内に新しいオブジェクトを構築することを好みます。

コードをコピーします コードは次のとおりです:

関数 Foo() {
var obj = {};
Obj.value = 'blub';

var private = 2;
Obj.someMethod = function(value) {
This.value = 値;
}

obj.getPrivate = function() {
return private;
}
obj を返します;
}

上記のコードは new を使用するよりもエラーが発生しにくく、プライベート変数を使用する場合により便利ですが、いくつかの欠点もあります。

プロトタイプ オブジェクトは共有できないため、より多くのメモリが必要になります。
継承を実装するには、ファクトリ パターンで別のオブジェクトのすべてのメソッドをコピーするか、それを新しいオブジェクトのプロトタイプとして使用する必要があります。
new の使用を避けるためだけにプロトタイプ チェーンを放棄することは、JavaScript 言語の精神に反するように思えます。

概要

new を使用するとエラーが発生しやすくなりますが、これはプロトタイプ チェーンの使用を諦める理由にはなりません。最後のアプローチについては、アプリケーションのニーズによって異なります。最善の方法は、スタイルを選択し、それに固執することです。

簡単に言うと、コンストラクターはインスタンス オブジェクトを初期化し、オブジェクトのプロトタイプ属性はインスタンス オブジェクトを継承します。

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築

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

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法

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

JavaScript で HTTP ステータス コードを簡単に取得する方法

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

JavaScriptでinsertBeforeを使用する方法

See all articles