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

javascriptこの列では、「new」演算子を紹介します。

コンストラクターと演算子 "new"

通常の {...} 構文を使用してオブジェクトを作成できます。しかし、多くの場合、複数のユーザーやメニュー項目など、同様のオブジェクトを多数作成する必要があります。

これは、コンストラクターと "new" 演算子を使用して実現できます。

Constructor

Constructor は技術的には通常の関数です。ただし、2 つの規則があります:

1. 名前は大文字で始まります。
2. これらは、"new" 演算子によってのみ実行できます。

例:

function User(name) {  this.name = name;  this.isAdmin = false;
}let user = new User("Jack");

alert(user.name); // Jackalert(user.isAdmin); // false复制代码

new 演算子を使用して関数を実行すると、次の手順に従います。 a 新しい空のオブジェクトが作成され、

this

に割り当てられます。
1. 関数本体の実行。通常、this
を変更し、新しいプロパティを追加します。
2. this
の値を返します。
3. つまり、
new User(...)

は次のようなことを行います:

function User(name) {  // this = {};（隐式创建）

  // 添加属性到 this
  this.name = name;  this.isAdmin = false;  // return this;（隐式返回）}复制代码

So new User("Jack" ) 同じオブジェクトが生成されます:

let user = {  name: "Jack",  isAdmin: false};复制代码

さて、他のユーザーを作成したい場合は、 new User("Ann"),

new User( "Alice" ) など毎回リテラル作成を使用するよりもはるかに短くて読みやすくなります。 これがコンストラクターの主な目的であり、再利用可能なオブジェクト作成コードを実装することです。

もう一度強調しておきますが、技術的にはどんな関数もコンストラクターとして使用できます。つまり、任意の関数を

new

を通じて実行でき、これにより上記のアルゴリズムが実行されます。 「大文字化」は、関数が

new を使用して実行されることを明確にするための一般的な規則です。 new function() { ... }

単一の複雑なオブジェクトを作成するコード行が多数ある場合、次のようにそれらをコンストラクターにカプセル化できます。

let user = new function() {  this.name = "John";  this.isAdmin = false;  // ……用于用户创建的其他代码
  // 也许是复杂的逻辑和语句
  // 局部变量等};复制代码

コンストラクターはどこにも保存されず、作成されて呼び出されただけであるため、再度呼び出すことはできません。したがって、このヒントは、単一のオブジェクトを構築するコードを、将来再利用する必要なくカプセル化することを目的としています。

コンストラクター パターン テスト: new.target

高度なコンテンツ:

このセクションに含まれる構文コンテンツは、必要がない限りほとんど使用されません。すべてを理解するには、構文をスキップしてください。

関数内で、

new.target

プロパティを使用して、関数が

new を使用して呼び出されたかどうかを確認できます。 通常の呼び出しの場合は空です。new

を使用した呼び出しの場合は、関数と同じです:

function User() {
  alert(new.target);
}// 不带 "new"：User(); // undefined// 带 "new"：new User(); // function User { ... }复制代码

関数内で使用して関数を決定できます。 new を通じて呼び出される「コンストラクター モード」ですか、それとも

new を通じて呼び出されない「通常モード」ですか。 次のように、new

呼び出しに通常の呼び出しと同じ仕事をさせることもできます:

function User(name) {  if (!new.target) { // 如果你没有通过 new 运行我
    return new User(name); // ……我会给你添加 new
  }  this.name = name;
}let john = User("John"); // 将调用重定向到新用户alert(john.name); // John复制代码

このアプローチは、構文をよりわかりやすくするためにライブラリで使用されることがあります。フレキシブル 。このようにして、ユーザーが関数を呼び出すと、new が使用されているかどうかに関係なく、プログラムは動作します。

ただし、new

を省略するとコード内で何が起こっているかを観察することが困難になるため、どこでも使用するのは良いことではありません。そして、

new を通じて、これによって新しいオブジェクトが作成されることを誰もが知ることができます。 コンストラクターの return

通常、コンストラクターには

return

ステートメントはありません。彼らの仕事は、必要なものをすべて

this に書き込み、それを自動的に結果に変換することです。 ただし、return

ステートメントがある場合、ルールは単純です:

If

return

returns an object, then return
• this の代わりにこのオブジェクトを使用します。 return
がプリミティブ型を返した場合、それは無視されます。
• つまり、オブジェクトを指定した
return

はそのオブジェクトを返し、それ以外の場合はすべて

this が返されます。 たとえば、ここで return

はオブジェクトを返すことで

this をオーバーライドします。

function BigUser() {  this.name = "John";  return { name: "Godzilla" };  // <-- 返回这个对象}

alert( new BigUser().name );  // Godzilla，得到了那个对象复制代码

これは return が次の例です。 empty (またはプリミティブ型をその後に置くこともできますが、効果はありません):

function SmallUser() {  this.name = "John";  return; // <-- 返回 this}

alert( new SmallUser().name );  // John复制代码

通常、コンストラクターには return ステートメントがありません。ここでは、主に完全を期すために、返されたオブジェクトの特別な動作について説明します。

括弧を省略します

ちなみに、パラメータがない場合は、

new

の後の括弧を省略できます:

let user = new User; // <-- 没有参数// 等同于let user = new User();复制代码

ここで括弧を省略することはできません。 「良いスタイル」とみなされますが、この構文は仕様で許可されています。 コンストラクターのメソッド

コンストラクターを使用してオブジェクトを作成すると、優れた柔軟性が得られます。コンストラクターには、オブジェクトの構築方法とオブジェクトに何を入れるかを定義するパラメーターが含まれる場合があります。

当然，我们不仅可以将属性添加到 this 中，还可以添加方法。

例如，下面的 new User(name) 用给定的 name 和方法 sayHi 创建了一个对象：

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() { ... }
}
*/复制代码

类 是用于创建复杂对象的一个更高级的语法，我们稍后会讲到。

总结

• 构造函数，或简称构造器，就是常规函数，但大家对于构造器有个共同的约定，就是其命名首字母要大写。
• 构造函数只能使用 new 来调用。这样的调用意味着在开始时创建了空的 this，并在最后返回填充了值的 this。

我们可以使用构造函数来创建多个类似的对象。

JavaScript 为许多内置的对象提供了构造函数：比如日期 Date、集合 Set 以及其他我们计划学习的内容。

对象，我们还会回来哒！

在本章中，我们只介绍了关于对象和构造器的基础知识。它们对于我们在下一章中，学习更多关于数据类型和函数的相关知识非常重要。

在我们学习了那些之后，我们将回到对象，在 info:prototypes 和 info:classes 章节中深入介绍它们。

作业题

先自己做题目再看答案。

1. 两个函数 — 一个对象

重要程度：⭐️⭐️

是否可以创建像 new A()==new B() 这样的函数 A 和 B？

function A() { ... }function B() { ... }let a = new A;let b = new B;

alert( a == b ); // true复制代码

如果可以，请提供一个它们的代码示例。

2. 创建 new Calculator

重要程度：⭐️⭐️⭐️⭐️⭐️

创建一个构造函数 Calculator，它创建的对象中有三个方法：

• read() 使用 prompt 请求两个值并把它们记录在对象的属性中。
• sum() 返回这些属性的总和。
• mul() 返回这些属性的乘积。

例如：

let calculator = new Calculator();
calculator.read();

alert( "Sum=" + calculator.sum() );
alert( "Mul=" + calculator.mul() );复制代码

3. 创建 new Accumulator

重要程度：⭐️⭐️⭐️⭐️⭐️

创建一个构造函数 Accumulator(startingValue)。

它创建的对象应该：

• 将“当前 value”存储在属性 value 中。起始值被设置到构造器 startingValue 的参数。
• read() 方法应该使用 prompt 来读取一个新的数字，并将其添加到 value 中。

换句话说，value 属性是所有用户输入值与初始值 startingValue 的总和。

下面是示例代码：

let accumulator = new Accumulator(1); // 初始值 1accumulator.read(); // 添加用户输入的 valueaccumulator.read(); // 添加用户输入的 valuealert(accumulator.value); // 显示这些值的总和复制代码

相关免费学习推荐：JavaScript（视频）

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