JavaScriptのコンストラクタとnew演算子の例を詳しく解説

黄舟

リリース： 2017-08-08 13:54:30

オリジナル

4049 人が閲覧しました

JavaScript のコンストラクターと new 演算子の詳細な例

｛…｝この構文では 1 つのオブジェクトを作成できますが、類似したオブジェクトを複数作成する必要がある場合は、コンストラクターと「new」演算子を使用する必要があります。

Constructor

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. 関数を実行します。通常はこのオブジェクトを変更し、いくつかの新しい属性を追加します。

3.これが返されます。

つまり、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 を使用して呼び出す必要があることを明確にするための一般的な慣例にすぎません。

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 メソッドを使用しているかどうかを確認できます。特別な属性

を使用すると機能します。

通常に呼び出された場合、値は空であり、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

括弧を無視することは適切なコーディングスタイルではありませんが、仕様では許可されています。

コンストラクター内のメソッド

コンストラクターを使用してオブジェクトを作成すると、さまざまなオブジェクトを定義するためのパラメーターが提供されるため、非常に柔軟性が高まります。
もちろん、これに属性を追加するだけでなく、メソッドも追加します。
rrreee
summary

Constructor (略してコンストラクター) は通常の関数ですが、最初の文字を使用するという一般的な規則があります。名前は大文字になります。

🎜🎜コンストラクターは new を使用して呼び出されます。つまり、空の this オブジェクトの作成を開始し、埋められたコンテンツを含む this を返します。 🎜🎜🎜🎜コンストラクターを使用して複数の同様のオブジェクトを作成できます。これについては後で詳しく説明します。 🎜JavaScript は、Date、Set などの一部の組み込みオブジェクトのコンストラクターを提供します。 🎜

以上がJavaScriptのコンストラクタとnew演算子の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。