JavaScript-Konstruktor und neuer Operator (wichtige Punkte, unbedingt lesen)

Dieser Artikel stellt hauptsächlich den JavaScript-Konstruktor und den neuen Operator vor, indem er das Verständnis des neuen Operators, der Codeinterpretation, der Schlüsselanalyse, der Bedeutung von „neu“, einer Zusammenfassung usw. erläutert. Sie können die spezifischen Operationsschritte unten im Detail überprüfen Erklärung, interessierte Freunde können darauf verweisen.

Funktionen in JS können entweder Konstruktoren sein oder als gewöhnliche Funktionen aufgerufen werden. Wenn Sie new zum Erstellen eines Objekts verwenden, ist die entsprechende Funktion der Konstruktor, und wenn sie über ein Objekt aufgerufen wird, ist sie eine gewöhnliche Funktion.

Es gibt drei Möglichkeiten, gewöhnliche Funktionen zu erstellen: explizite Deklaration, anonyme Definition und neue Funktion().

Wenn ein neues Objekt durch new erstellt wird, verweist die unterste Ebene von JS die Prototypenkette des neuen Objekts auf das Prototypenobjekt des Konstruktors, sodass eine Prototypenkette zwischen dem neuen Objekt und dem Funktionsobjekt erstellt wird . Das Objekt kann auf die Methoden und Eigenschaften im Prototyp des Funktionsobjekts zugreifen.

Wie andere Hochsprachen verfügt auch Javascript über Konstruktoren und neue Operatoren. Wir wissen, dass new zum Instanziieren einer Klasse und zum Zuweisen eines Instanzobjekts im Speicher verwendet wird. Aber in Javascript ist alles ein Objekt. Warum müssen wir new verwenden, um Objekte zu generieren? Dieser Artikel führt Sie in die Geheimnisse des Neuen in Javascript ein...

1 Lernen Sie den neuen Operator kennen

function Animal(name){
this.name = name;
}
 Animal.color = "black";
 Animal.prototype.say = function(){
console.log("I'm " + this.name);
 };
 var cat = new Animal("cat");

 console.log(
 cat.name, //cat
 cat.color //undefined
 );
 cat.say(); //I'm cat

 console.log(
 Animal.name, //Animal
 Animal.color //back
 );
 Animal.say(); //Animal.say is not a function

2. Codeinterpretation

Zeilen 1-3 erstellen eine Funktion Animal und definieren das Attribut: name darauf. Der Wert von name ist der formale Parameter, wenn die Funktion ist hingerichtet.

Zeile 4 definiert eine statische Eigenschaft: Farbe für das Animal-Objekt (Animal selbst ist ein Funktionsobjekt) und weist den Wert „schwarz“ zu.

Zeilen 5-7 definieren das Prototypobjekt des Tierfunktion Auf dem Prototyp wird eine say()-Methode definiert, und die say-Methode gibt den Namenswert davon aus.

Zeile 8 erstellt ein neues Objekt cat durch das neue Schlüsselwort

Zeilen 10-14 versucht das Objekt cat auf die Namens- und Farbattribute zuzugreifen und ruft die Methode say auf.

Zeilen 16–20 Das Animal-Objekt versucht, auf die Namens- und Farbeigenschaften zuzugreifen und ruft die Say-Methode auf.

3. Schlüsselanalyse

Die 8. Codezeile ist der Schlüssel:

var cat = new Animal("cat");

Animal selbst ist eine gewöhnliche Funktion, aber wenn ein Objekt durch new erstellt wird, ist Animal der Konstruktor.

Wenn die JS-Engine diesen Code ausführt, erledigt sie intern eine Menge Arbeit. Der Pseudocode wird verwendet, um seinen Arbeitsablauf wie folgt zu simulieren:

new Animal("cat") = {

var obj = {};

obj.__proto__ = Animal.prototype;

var result = Animal.call(obj,"cat");

return typeof result === 'object'? result : obj;
}

(1) Erstellen ein leeres Objekt obj;

(2) Zeigen Sie den Prototyp des obj-Objekts auf den Prototyp des Konstruktors Animal. Zu diesem Zeitpunkt wird die Prototypenkette des obj-Objekts erstellt: obj-> ;Animal.prototype-> ;Object.prototype->null

(3)Rufen Sie die Animal-Funktion in der Ausführungsumgebung des obj-Objekts auf und übergeben Sie den Parameter „cat“. Entspricht var result = obj.Animal("cat").

(4)Untersuchen Sie den in Schritt 3 zurückgegebenen Rückgabewert. Wenn kein Rückgabewert vorhanden ist oder ein Nicht-Objektwert zurückgegeben wird, wird obj andernfalls als neues Objekt zurückgegeben. Der Rückgabewert wird als neues Objekt verwendet. Das Objekt wird zurückgegeben.

Nachdem wir seinen Funktionsmechanismus verstanden haben, wissen wir, dass cat tatsächlich der Rückgabewert von Prozess (4) ist, sodass wir mehr über das Katzenobjekt wissen:

Die Prototypkette von cat ist:cat->Animal.prototype->Object.prototype->null

Ein neues Attribut wird zu cat: name hinzugefügt

Nachdem wir den Generierungsprozess von cat analysiert haben, werfen wir einen Blick auf das Ausgabeergebnis:

cat.name - > ; Im Prozess (3) generiert das obj-Objekt das Namensattribut. Daher ist cat.name hier obj.name

cat.color -> cat sucht zunächst nach seiner eigenen Farbe, und wenn diese nicht gefunden wird, sucht es entlang der Prototypenkette. Wir verwenden nur die darauf definierte Tierobjektfarbe, sie ist jedoch nicht in ihrer Prototypenkette definiert und kann daher nicht gefunden werden.

cat.say -> cat sucht zunächst nach seiner eigenen say-Methode. Wenn sie nicht gefunden wird, sucht sie entlang der Prototypenkette In der Prototypenkette habe ich die Methode say gefunden.

Darüber hinaus wird auf this.name auch in der say-Methode zugegriffen. Dies bezieht sich hier auf den Aufrufer obj, sodass der Wert von obj.name ausgegeben wird.

Für Animal ist es auch selbst ein Objekt, daher befolgt es beim Zugriff auf Eigenschaften und Methoden auch die oben genannten Suchregeln, also:

Animal.color -> "black"

Animal.name -> „Animal“, Animal sucht zuerst nach seinem eigenen Namen und findet den Namen, aber dieser Name ist nicht der von uns definierte Name, sondern eine integrierte Eigenschaft des Funktionsobjekts.

Wenn ein Funktionsobjekt generiert wird, verfügt es im Allgemeinen über ein integriertes Namensattribut und verwendet den Funktionsnamen als zugewiesenen Wert (nur Funktionsobjekte).

Animal.say -> Animal findet die Say-Methode nicht in sich selbst und sucht auch entlang ihrer Prototypenkette. Was ist die Prototypenkette von Animal?

Aus den Testergebnissen: Die Prototypenkette von Animal sieht folgendermaßen aus:

Animal->Function.prototype->Object.prototype->null

Deshalb Animal The Angenommen, die Methode ist in der Prototypenkette nicht definiert!

4. Die Bedeutung von neu

Nachdem wir den neuen Betreiber kennengelernt haben, kehren wir zu der eingangs genannten Frage zurück: Alles in JS Sie sind alle Objekte. Warum müssen wir new verwenden, um Objekte zu generieren?

要弄明白这个问题，我们首先要搞清楚cat和Animal的关系：

通过上面的分析，我们发现cat继承了Animal中的部分属性，因此我们可以简单的理解：Animal和cat是继承关系。

另一方面，cat是通过new产生的对象，那么cat到底是不是Animal的实例对象？ 我们先来了解一下JS是如何来定义“实例对象”的？

A instanceof B
如果上述表达式为true,JS认为A是B的实例对象，我们用这个方法来判断一下cat和Animal

cat instanceof Animal; //true
从执行结果看：cat确实是Animal实例，要想证实这个结果，我们再来了解一下JS中instanceof的判断规则：

var L = A.__proto__;
var R = B.prototype;
if(L === R)
return true;

如果A的proto 等价于 B的prototype，就返回true

在new的执行过程（2）中，cat的proto指向了Animal的prototype，所以cat和Animal符合instanceof的判断结果。

因此，我们认为：cat 是Animal的实例对象。

5、总结

在Javascript中, 通过new可以产生原对象的一个实例对象，而这个实例对象继承了原对象的属性和方法。因此，new存在的意义在于它实现了Javascript中的继承，而不仅仅是实例化了一个对象！

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS保留一位数字后移除非数字

JS DOM元素常见增删改查操作详解

JS保留两位小数输入数校验代码

Das obige ist der detaillierte Inhalt vonJavaScript-Konstruktor und neuer Operator (wichtige Punkte, unbedingt lesen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!