ホームページ > 記事 > ウェブフロントエンド > JavaScriptのコンストラクタとnew演算子の例を詳しく解説
{…}この構文では 1 つのオブジェクトを作成できますが、類似したオブジェクトを複数作成する必要がある場合は、コンストラクターと「new」演算子を使用する必要があります。
Constructor は技術的には通常の関数ですが、一般に 2 つの規則があります:
1. 名前の最初の文字は大文字です。
2. これらは new 演算子を使用してのみ実行する必要があります。
例:
function User(name) { this.name = name; this.isAdmin = false; } let user = new User("Jack"); alert(user.name); // Jack alert(user.isAdmin); // false
new User()
が実行されるときに舞台裏で何が行われるかを見てみましょう。 new User()
时背后到底做了什么?
1、首先创建一个空对象,然后赋值给this。
2、执行函数,通常修改this对象,增加一些新的属性。
3、this被返回。
换句话说,new User()
内容如下代码所示:
function User(name) { // this = {}; (implicitly) // we add properties to this this.name = name; this.isAdmin = false; // return this; (implicitly) }
所以 new User("Jack")
的结果和下面代码一致:
let user = { name: "Jack", isAdmin: false };
现在我们想创建其他对象,我们可以使用new User("Ann")
,new User("Alice")
1. まず空のオブジェクトを作成し、これに割り当てます。
2. 関数を実行します。通常はこのオブジェクトを変更し、いくつかの新しい属性を追加します。
つまり、new User()
の内容は次のとおりです:
let user = new function() { this.name = “John”; this.isAdmin = false; // ...other code for user creation // maybe complex logic and statements // local variables etc };したがって、
new User("Jack")
の結果は次と一致します。コード: function User() { alert(new.target); } User(); // undefined new User(); // function User { ... }次に、他のオブジェクトを作成したいと思います。
new User("Ann")
、 new User("Alice")
などを使用できます。毎回テキストを使用してオブジェクトを説明するよりも短くて読みやすいです。 現時点でのコンストラクターの主な目的は、オブジェクトを作成するためのコードの再利用を実現することです。 最初の文字を大文字にするのは、それが韓国のコンストラクターであり、new を使用して呼び出す必要があることを明確にするための一般的な慣例にすぎません。
new function(){…} new.target
複雑なオブジェクトを作成するためのコード行が複数ある場合、コンストラクターを使用してそれらをラップできます。コードは次のとおりです:
function User(name) { if (!new.target) { // if you run me without new return new User(name); // ...I will add new for you } this.name = name; } let john = User("John"); // redirects call to new User alert(john.name); // John
コンストラクターは、次の理由により再度呼び出すことはできません。保存されていません。オブジェクトを作成するために呼び出されただけです。この手法の目的は、単に単一の複雑なオブジェクト コードをカプセル化することです。
デュアルユースコンストラクター: new.target
通常に呼び出された場合、値は空であり、new 経由で呼び出された場合、値は関数になります。
function BigUser() { this.name = "John"; return { name: "Godzilla" }; // <-- returns an object } alert( new BigUser().name ); // Godzilla, got that object
function SmallUser() { this.name = "John"; return; // finishes the execution, returns this // ... } alert( new SmallUser().name ); // Johnこのメソッドは、コードをより柔軟にするために一部のライブラリで使用されます。ただし、User オブジェクトの内部状況をよく知っている人にとっては、これをどこでも使用するのが良いというわけではありません。 コンストラクターの戻り値通常、コンストラクターには戻り値ステートメントは必要ありません。そのタスクは、必要なコンテンツをこのオブジェクトに書き込み、それを自動的に返すことです。
しかし、return ステートメントがある場合、ルールは単純です:
- return がオブジェクトを返す場合、this の代わりに this が返されます。- return がプリミティブ型を返した場合、それは無視され、これが返されます。 つまり、 return はオブジェクトを返すか、 this の代わりにオブジェクトを返します。 例は次のとおりです:
let user = new User; // <-- no brackets // same as let user = new User();この例は空を返すか、実際には効果のないプリミティブ型を書き込みます。
function User(name) { this.name = name; this.sayHi = function() { alert( "My name is: " + this.name ); }; } let john = new User("John"); john.sayHi(); // My name is: John /* john = { name: "John", sayHi: function() { ... } } */ほとんどのコンストラクターは返す必要はありません。この特別な動作は、知的に完全であることを目的としてここで思い出させてください。
括弧は無視してください
rrreee
括弧を無視することは適切なコーディング スタイルではありませんが、仕様では許可されています。 コンストラクター内のメソッドもちろん、これに属性を追加するだけでなく、メソッドも追加します。
summary
Constructor (略してコンストラクター) は通常の関数ですが、最初の文字を使用するという一般的な規則があります。名前は大文字になります。
以上がJavaScriptのコンストラクタとnew演算子の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。