Detaillierte Erläuterung des JS-Prototyps und der Prototypenkette (1)

Dieses Mal werde ich Ihnen den JS-Prototyp und die Prototypenkette ausführlich erklären und worauf Sie achten sollten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Gewöhnliche Objekte und Funktionsobjekte

In JavaScript ist alles ein Objekt! Aber auch die Objekte sind unterschiedlich. Sie sind in gewöhnliche Objekte und Funktionsobjekte unterteilt. Objekt und Funktion sind die Funktionsobjekte, die mit JS geliefert werden. Die folgenden Beispiele veranschaulichen

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();
function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
      console.log(typeof Object);  //function
      console.log(typeof Function);  //function 
      console.log(typeof f1); //function 
      console.log(typeof f2);//function
      console.log(typeof f3);//function 
      console.log(typeof o1);// object
      console.log(typeof o2);//object
      console.log(typeof o3);  //object

Im obigen Beispiel ist o1 o2 o3 ein gewöhnliches Objekt und f1 f2 f3 ein Funktionsobjekt. Der Unterschied ist eigentlich ganz einfach zu erkennen. Alle durch new Function() erstellten Objekte sind Funktionsobjekte, andere sind gewöhnliche Objekte. f1, f2 werden letztendlich alle durch new Function() erstellt. Funktionsobjekte werden auch durch New Function() erstellt.

Achten Sie darauf, zwischen gewöhnlichen Objekten und Funktionsobjekten zu unterscheiden. Wir werden es im Folgenden häufig verwenden.

2. Konstruktor

Lassen Sie uns zunächst die Kenntnisse des Konstruktors überprüfen:

function Person(name, age, job) {
 this.name = name; 
 this.age = age;
  this.job = job; 
  this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

Im obigen Beispiel sind Person1 und Person2 beide Personeninstanzen . Beide Instanzen verfügen über eine Konstruktoreigenschaft, die einen Zeiger auf Person darstellt. Das heißt:

console.log(person1.constructor == Person); //true
  console.log(person2.constructor == Person); //true

Wir müssen uns zwei Konzepte merken (Konstruktor, Instanz):
Person1 und Person2 sind beide Instanzen des Konstruktors Person
Eine Formel:
Konstruktion von Instanzen Funktionsattribut (Konstruktor) zeigt auf den Konstruktor.

3. Prototypobjekt

Immer wenn in JavaScript ein Objekt (eine Funktion ist auch ein Objekt) definiert wird, enthält das Objekt einige vordefinierte Eigenschaften. Jedes Funktionsobjekt verfügt über ein Prototypattribut, das auf das Prototypobjekt der Funktion verweist. (Verwenden Sie zuerst __proto__. Im zweiten Kurs wird es im Detail analysiert)

function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age  = 28;
Person.prototype.job  = 'Software Engineer';
Person.prototype.sayName = function() {
  alert(this.name);
}  
var person1 = new Person();
person1.sayName(); // 'Zaxlct'var person2 = new Person();
person2.sayName(); // 'Zaxlct'console.log(person1.sayName == person2.sayName); //true

Wir haben das erste „Gesetz“ dieses Artikels erhalten:

Jedes Objekt hat das _ _proto__-Attribut, aber nur eine Funktion Objekte haben das Prototypattribut

Was ist also ein Prototypobjekt?
Wenn wir das obige Beispiel ändern, werden Sie verstehen:

Person.prototype = {   name:  'Zaxlct',   age: 28,   job: 'Software Engineer',   sayName: function() {
     alert(this.name);
   }
}

Das Prototypobjekt ist, wie der Name schon sagt, ein gewöhnliches Objekt (Unsinn = =!). Von nun an müssen Sie bedenken, dass das Prototypobjekt Person.prototype ist. Wenn Sie immer noch Angst davor haben, stellen Sie es sich als Buchstaben A vor: var A = Person.prototype

Oben haben wir A vier Attribute angegeben Hinzugefügt werden: Name, Alter, Beruf, sayName. Tatsächlich verfügt es auch über ein Standardattribut: Konstruktor

Standardmäßig erhalten alle Prototypobjekte automatisch ein Konstruktorattribut (Konstruktor), das (ein Zeiger) auf die Funktion zeigt, in der sich das Prototypattribut befindet ( Person)

Der obige Satz ist etwas verwirrend. Lassen Sie uns ihn „übersetzen“: A hat ein Standardkonstruktorattribut, bei dem es sich um einen Zeiger handelt, der auf Person zeigt. Das heißt:

Person.prototype.constructor == Person

Im zweiten Abschnitt „Konstruktor“ oben wissen wir, dass das Konstruktorattribut (Konstruktor) der Instanz auf den Konstruktor zeigt: person1.constructor == Person

Diese beiden „Formeln“ scheinen irgendwie verwandt zu sein:

person1.constructor == Person
Person.prototype.constructor == Person

Warum hat person1 das Konstruktorattribut? Das liegt daran, dass person1 eine Instanz von Person ist.
Warum hat Person.prototype dann ein Konstruktorattribut? ? Ebenso ist Person.prototype (stellen Sie sich A vor) ebenfalls eine Instanz von Person.
Das heißt, wenn eine Person erstellt wird, wird ein Instanzobjekt davon erstellt und seinem Prototyp zugewiesen. Der grundlegende Prozess ist wie folgt:

var A = new Person();
Person. Prototyp = A;

Fazit: Das Prototypobjekt (Person.prototype) ist eine Instanz des Konstruktors (Person).

Prototypobjekte sind eigentlich gewöhnliche Objekte (mit Ausnahme von Function.prototype, das ein Funktionsobjekt ist, aber etwas ganz Besonderes. Es hat kein Prototypattribut (wie bereits erwähnt, haben alle Funktionsobjekte Prototypattribute)). Schauen Sie sich das folgende Beispiel an:

function Person(){}; console.log(Person.prototype) //Person{}
 console.log(typeof Person.prototype) //Object
 console.log(typeof Function.prototype) // Function，这个特殊
 console.log(typeof Object.prototype) // Object
 console.log(typeof Function.prototype.prototype) //undefined

Function.prototype Warum ist es ein Funktionsobjekt?

var A = new Function (); Function.prototype = A;

Wie oben erwähnt, sind alle von new Function() generierten Objekte Funktionsobjekte. Da A ein Funktionsobjekt ist, ist Function.prototype ein Funktionsobjekt.

Wofür wird das Prototypobjekt verwendet? Wird hauptsächlich zur Vererbung verwendet. Zum Beispiel:

 var Person = function(name){    this.name = name; // tip: 当函数执行时这个 this 指的是谁？
  };
  Person.prototype.getName = function(){    return this.name;  // tip: 当函数执行时这个 this 指的是谁？
  }  var person1 = new person('Mick');
  person1.getName(); //Mick

Wie aus diesem Beispiel ersichtlich ist, erbt das gewöhnliche Objekt, das aus der Person-Instanz (person1) stammt, diese Eigenschaft, indem eine Eigenschaft eines Funktionsobjekts auf Person.prototype gesetzt wird. . Wie die Vererbung konkret implementiert wird, hängt von der folgenden Prototypenkette ab.

Keine Frage, auf wen deuten die beiden oben genannten Punkte hin?

 var person1 = new person('Mick');
  person1.name = 'Mick'; // 此时 person1 已经有 name 这个属性了
  person1.getName(); //Mick

In beiden Fällen verweist dies also auf person1, wenn die Funktion ausgeführt wird.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JS-Prototyps und der Prototypenkette (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!