Beispielhafte Einführung in den JavaScript-Konstruktor und den neuen Operator

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 die Attribute darauf: Name, Name Die Werte sind die formalen Parameter bei der Ausführung der Funktion.

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 neu 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 Sie ein leeres Objekt obj;

(2)Zeigen Sie das Proto von obj auf den Prototyp des Objektprototyps des Konstruktors Animal und dann erstellen obj Die Prototypkette des Objekts: obj->Animal.prototype->Object.prototype->null

(3)Rufen Sie die Animal-Funktion in der Ausführungsumgebung auf des obj-Objekts und übergeben Sie die 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->nullcat->Animal.prototype->Object.prototype->null<br>

Ein neues Attribut wird zu cat hinzugefügt: name

Schauen wir uns nach der Analyse des cat-Generierungsprozesses das Ausgabeergebnis an:

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 suchen nur danach, dass die Farbe des Tierobjekts darauf definiert ist, aber es ist nicht in seiner 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

Es gibt also keine Mitsprachemethode, die in der Prototypenkette von Animal definiert ist!

4. Die Bedeutung der Existenz des Neuen

认识了new运算符之后，我们再回到开篇提到的问题：JS中万物皆对象，为什么还要通过new来产生对象？

要弄明白这个问题，我们首先要搞清楚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中的继承，而不仅仅是实例化了一个对象！

Das obige ist der detaillierte Inhalt vonBeispielhafte Einführung in den JavaScript-Konstruktor und den neuen Operator. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!