Die reguläre {...}
-Syntax ermöglicht das Erstellen eines Objekts. Wir müssen jedoch häufig viele ähnliche Objekte erstellen, z. B. mehrere Benutzer oder Menüelemente usw. {...}
语法允许创建一个对象。但是我们经常需要创建许多类似的对象,例如多个用户或菜单项等。
这可以使用构造函数和 "new"
操作符来实现。
构造函数在技术上是常规函数。不过有两个约定:
"new"
操作符来执行。例如:
function User(name) { this.name = name; this.isAdmin = false; }let user = new User("Jack"); alert(user.name); // Jackalert(user.isAdmin); // false复制代码
当一个函数被使用 new
操作符执行时,它按照以下步骤:
this
。this
,为其添加新的属性。this
的值。换句话说,new User(...)
做的就是类似的事情:
function User(name) { // this = {};(隐式创建) // 添加属性到 this this.name = name; this.isAdmin = false; // return this;(隐式返回)}复制代码
所以 new User("Jack")
的结果是相同的对象:
let user = { name: "Jack", isAdmin: false};复制代码
现在,如果我们想创建其他用户,我们可以调用 new User("Ann")
,new User("Alice")
等。比每次都使用字面量创建要短得多,而且更易于阅读。
这是构造器的主要目的 —— 实现可重用的对象创建代码。
让我们再强调一遍 —— 从技术上讲,任何函数都可以用作构造器。即:任何函数都可以通过 new
来运行,它会执行上面的算法。“首字母大写”是一个共同的约定,以明确表示一个函数将被使用 new
来运行。
如果我们有许多行用于创建单个复杂对象的代码,我们可以将它们封装在构造函数中,像这样:
let user = new function() { this.name = "John"; this.isAdmin = false; // ……用于用户创建的其他代码 // 也许是复杂的逻辑和语句 // 局部变量等};复制代码
构造器不能被再次调用,因为它不保存在任何地方,只是被创建和调用。因此,这个技巧旨在封装构建单个对象的代码,而无需将来重用。
进阶内容:
本节涉及的语法内容很少使用,除非你想了解所有内容,否则你可以直接跳过该语法。
在一个函数内部,我们可以使用 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
语句。它们的任务是将所有必要的东西写入 this
,并自动转换为结果。
但是,如果这有一个 return
语句,那么规则就简单了:
return
返回的是一个对象,则返回这个对象,而不是 this
。return
返回的是一个原始类型,则忽略。换句话说,带有对象的 return
返回该对象,在所有其他情况下返回 this
。
例如,这里 return
通过返回一个对象覆盖 this
:
function BigUser() { this.name = "John"; return { name: "Godzilla" }; // <-- 返回这个对象} alert( new BigUser().name ); // Godzilla,得到了那个对象复制代码
这里有一个 return
为空的例子(或者我们可以在它之后放置一个原始类型,没有什么影响):
function SmallUser() { this.name = "John"; return; // <-- 返回 this} alert( new SmallUser().name ); // John复制代码
通常构造器没有 return
语句。这里我们主要为了完整性而提及返回对象的特殊行为。
顺便说一下,如果没有参数,我们可以省略 new
"new"
erreicht werden.
"new"
ausgeführt werden. Zum Beispiel:
let user = new User; // <-- 没有参数// 等同于let user = new User();复制代码
new
ausgeführt wird, folgt sie den folgenden Schritten: 🎜diesem
zugewiesen. dies
und fügt ihm neue Attribute hinzu. this
zurück. new User(...)
macht so etwas wie: 🎜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 User("Jack") Das Ergebnis von code> ist das gleiche Objekt: 🎜function A() { ... }function B() { ... }let a = new A;let b = new B;
alert( a == b ); // true复制代码
Nach dem Login kopierenNach dem Login kopieren🎜Wenn wir nun andere Benutzer erstellen möchten, können wir new User("Ann")
, new User("Alice") usw. Viel kürzer und einfacher zu lesen, als jedes Mal die wörtliche Erstellung zu verwenden. 🎜🎜Dies ist der Hauptzweck von Konstruktoren – die Implementierung von wiederverwendbarem Objekterstellungscode. 🎜🎜Lassen Sie es uns noch einmal betonen – technisch gesehen kann jede Funktion als Konstruktor verwendet werden. Das heißt: Jede Funktion kann über new
ausgeführt werden, wodurch der obige Algorithmus ausgeführt wird. „Großschreibung“ ist eine gängige Konvention, um deutlich zu machen, dass eine Funktion mit new
ausgeführt wird. 🎜new function() { ...
🎜Wenn wir viele Codezeilen haben, die ein einzelnes komplexes Objekt erstellen, können wir sie in einem Konstruktor kapseln, z Dies: 🎜let calculator = new Calculator();
calculator.read();
alert( "Sum=" + calculator.sum() );
alert( "Mul=" + calculator.mul() );复制代码
Nach dem Login kopierenNach dem Login kopieren🎜Der Konstruktor kann nicht erneut aufgerufen werden, da er nirgendwo gespeichert, sondern nur erstellt und aufgerufen wird. Daher soll dieser Tipp den Code kapseln, der ein einzelnes Objekt erstellt, ohne dass es in Zukunft wiederverwendet werden muss. 🎜Konstruktormustertest: new.target🎜🎜Erweiterter Inhalt:🎜🎜Der in diesem Abschnitt behandelte Syntaxinhalt wird selten verwendet, es sei denn, Sie möchten um alles zu verstehen, ansonsten können Sie die Syntax einfach überspringen. 🎜
🎜Innerhalb einer Funktion können wir das Attribut new.target
verwenden, um zu prüfen, ob sie mit new
aufgerufen wurde. 🎜🎜Bei regulären Aufrufen ist es leer. Bei Aufrufen mit new
entspricht es der Funktion: 🎜let accumulator = new Accumulator(1); // 初始值 1accumulator.read(); // 添加用户输入的 valueaccumulator.read(); // 添加用户输入的 valuealert(accumulator.value); // 显示这些值的总和复制代码
Nach dem Login kopierenNach dem Login kopieren🎜Es kann innerhalb der Funktion verwendet werden, um zu bestimmen, ob die Funktion über übergeben wird new Der von
aufgerufene „Konstruktormodus“ ist immer noch der „reguläre Modus“, der nicht von new
aufgerufen wird. 🎜🎜Wir können auch dafür sorgen, dass der new
-Aufruf die gleiche Aufgabe wie ein normaler Aufruf erledigt, etwa so: 🎜rrreee🎜Dieser Ansatz wird manchmal in Bibliotheken verwendet, um die Syntax flexibler zu gestalten. Auf diese Weise funktioniert das Programm beim Aufrufen der Funktion unabhängig davon, ob sie new
verwenden oder nicht. 🎜🎜Es überall zu verwenden ist jedoch keine gute Sache, da das Weglassen von new
es schwierig macht, zu beobachten, was im Code passiert. Und durch new
können wir alle wissen, dass dadurch ein neues Objekt erstellt wird. 🎜Rückgabe des Konstruktors🎜🎜Normalerweise haben Konstruktoren keine return
-Anweisung. Ihre Aufgabe ist es, alle notwendigen Dinge in this
zu schreiben und diese automatisch in das Ergebnis umzuwandeln. 🎜🎜Wenn es jedoch eine return
-Anweisung gibt, ist die Regel einfach: 🎜
- Wenn
return
ein Objekt zurückgibt, dann geben Sie stattdessen dieses Objekt zurück von diesem
.
- Ignorieren, wenn
return
einen primitiven Typ zurückgibt.
🎜Mit anderen Worten: return
mit einem Objekt gibt dieses Objekt zurück, in allen anderen Fällen wird this
zurückgegeben. 🎜🎜Zum Beispiel überschreibt return
hier this
, indem es ein Objekt zurückgibt: 🎜rrreee🎜Hier ist ein Beispiel, bei dem return
leer ist (oder wir können es Das Einfügen eines primitiven Typs danach hat keine Auswirkung): 🎜rrreee🎜Normalerweise haben Konstruktoren keine return
-Anweisung. Hier erwähnen wir das besondere Verhalten zurückgegebener Objekte hauptsächlich der Vollständigkeit halber. 🎜Lassen Sie die Klammern weg
🎜Übrigens, wenn keine Parameter vorhanden sind, können wir die Klammern nach new
weglassen: 🎜rrreee🎜Nein Die Klammern müssen hier weggelassen werden. Wird als „guter Stil“ angesehen, die Syntax ist jedoch in der Spezifikation zulässig. 🎜🎜Methoden in Konstruktoren🎜🎜Die Verwendung von Konstruktoren zum Erstellen von Objekten bringt viel Flexibilität. Ein Konstruktor kann über Parameter verfügen, die definieren, wie das Objekt erstellt wird und was darin eingefügt werden soll. 🎜
当然,我们不仅可以将属性添加到 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() { ... }
}
*/复制代码
Nach dem Login kopierenNach dem Login kopieren
类 是用于创建复杂对象的一个更高级的语法,我们稍后会讲到。
总结
- 构造函数,或简称构造器,就是常规函数,但大家对于构造器有个共同的约定,就是其命名首字母要大写。
- 构造函数只能使用
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复制代码
Nach dem Login kopierenNach dem Login kopieren
如果可以,请提供一个它们的代码示例。
2. 创建 new Calculator
重要程度:⭐️⭐️⭐️⭐️⭐️
创建一个构造函数 Calculator
,它创建的对象中有三个方法:
-
read()
使用 prompt
请求两个值并把它们记录在对象的属性中。
-
sum()
返回这些属性的总和。
-
mul()
返回这些属性的乘积。
例如:
let calculator = new Calculator();
calculator.read();
alert( "Sum=" + calculator.sum() );
alert( "Mul=" + calculator.mul() );复制代码
Nach dem Login kopierenNach dem Login kopieren
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); // 显示这些值的总和复制代码
Nach dem Login kopierenNach dem Login kopieren
相关免费学习推荐:JavaScript(视频)
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Konstruktors und des „neuen' Operators. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!