In JavaScript erstellt der neue Operator eine Instanz eines benutzerdefinierten Objekttyps oder eine Instanz eines integrierten Objekts mit einem Konstruktor. Das Erstellen eines Objekts ist einfach. Warum müssen wir den neuen Operator auf einen Schlag verwenden? Was ist das für eine Magie?
Lernen Sie den neuen Betreiber kennen
Verwenden Sie das folgende Beispiel, um den neuen Operator zu verstehen:
function Person (name) {
this.name = name
}
Person.prototype.getName = function () {
console.log(this.name)
}
var joe = new Person('joe')
joe.sayHello = function () {
console.log('Hello!')
}
joe.getName() // joe
joe.sayHello() // Hello!
Person.sayHello() // Uncaught TypeError: Person.sayHello is not a function
Person ist eine gewöhnliche Funktion, und wenn sie mit dem neuen Operator verwendet wird, ist Person ein Konstruktor. Das neue Objekt Joe, das von der neuen Person erhalten wurde ('Joe'), erbt die Eigenschaften der Person und zeigt gleichzeitig auch auf die Joe-Instanz. Das für joe hinzugefügte Attribut sayHello wirkt sich nicht auf Person aus, dh joe ist ein neues Objekt, das sich von Person unterscheidet.
Daher wird eine Prototypkette zwischen dem von new erstellten Instanzobjekt und dem Konstruktor erstellt, und dem Instanzobjekt wird die Möglichkeit gegeben, Eigenschaften über die Prototypkette zu erben .
Das Prinzip und die Umsetzung von neuen
Durch die obige Analyse führt der neue Bediener die folgenden vier Operationen intern aus:
- Erstellen Sie ein leeres einfaches JavaScript-Objekt (dh {}).
- Verknüpfen Sie das neue Objekt (dh legen Sie den Konstruktor des neuen Objekts fest) mit dem Funktionsobjekt.
- Verwenden Sie das neu erstellte Objekt als Kontext dafür.
- Wenn die Funktion kein Objekt zurückgibt, gibt sie das neu erstellte Objekt zurück.
Die Implementierung von new ist wie folgt:
function newOperator (ctor, ...args) {
var obj = {};
obj.__proto__ = ctor.prototype
var res = ctor.apply(obj, args)
return res || obj;
}
Optimieren Sie den Code:
function newOperator (ctor, ...args) {
var o = Object.create(ctor.prototype) // 合并第一和第二步：创建一个空的简单 JavaScript 对象（即{}），链接新对象（即设置该新对象的构造函数）到函数对象
return fn.apply(o, args) || o
}
Verwenden Sie die Funktion newOperator, um das obige Personenbeispiel zu testen:
function Person(name) {
this.name = name
}
Person.prototype.getName = function () {
console.log(this.name)
}
var joe = newOperator(Person, 'joe')
joe.sayHello = function () {
console.log('Hello!')
}
joe.getName() // joe
joe.sayHello() // Hello!
Person.sayHello() // Uncaught TypeError: Person.sayHello is not a function
Die Ergebnisse sind konsistent.
Eine bessere Möglichkeit zur Überprüfung ist:
function Person(name) {
this.name = name
}
console.log(new Person('joe')) // @1
console.log(newOperator(Person, 'joe')) // @2
Die Anzeigeinformationen von @ 1 und @ 2 in der Konsole sind genau gleich.