Die ausführlichste Erklärung des JS-Prototyps und der Prototypenkette

1. Gewöhnliche Objekte und Funktionsobjekte

In JavaScript ist alles ein Objekt! Aber auch die Objekte sind unterschiedlich. Unterteilt in gewöhnliche Objekte und Funktionsobjekte, sind Objekt und Funktion Funktionsobjekte, die mit JS geliefert werden. Das folgende Beispiel veranschaulicht

 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. Die Unterscheidung ist eigentlich sehr einfach. 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');

Das obige Beispiel Person1 und person2 sind beide Instanzen von Person. Beide Instanzen haben eine constructor (Konstruktor)-Eigenschaft, die auf Person verweist. 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: Das Konstruktorattribut der Instanz zeigt auf den Konstruktor.

3. Prototypobjekt

In JavaScript wird jedes Mal, wenn ein Objekt (eine Funktion ist auch ein Objekt) definiert, das Objekt definiert Enthält einige vordefinierte Eigenschaften. Jedes Funktionsobjekt verfügt über ein prototype-Attribut, das auf das Prototypobjekt der Funktion verweist. (Verwenden Sie zuerst das, was __proto__ ist, und analysieren Sie es im Detail in der zweiten Lektion)

 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:

 每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性

---

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);
    }
 }

Prototypobjekt, wie der Name schon sagt, ist es 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 den Buchstaben A vor: var A = Person.prototype

---

Oben haben wir A vier Attribute hinzugefügt: Name, Alter, Job, sayName. Tatsächlich verfügt es auch über ein Standardattribut: constructor

Standardmäßig werden alle Prototypenobjekte automatisch erhalten ein constructor (Konstruktor)-Attribut, das (ein Zeiger) auf die Funktion (Person) zeigt, in der sich das prototype-Attribut befindet

Der obige Satz ist etwas schwer auszusprechen: A hat ein Standardattribut constructor, das ein Zeiger ist, auf den es zeigt Person. Das heißt: Person.prototype.constructor == Person

---

Im zweiten Abschnitt „Konstruktor“ oben wissen wir, dass das Konstruktorattribut (Konstruktor) der -Instanz auf den Konstruktor < verweist 🎜> : 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.prototype = A; // 注：上面两行代码只是帮助理解，并不能正常运行

结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。

---

原型对象其实就是普通对象（但 Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有prototype属性））。看下面的例子：

  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 为什么是函数对象呢？

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

上文提到凡是通过 new Function( ) 产生的对象都是函数对象。因为 A 是函数对象，所以Function.prototype 是函数对象。

那原型对象是用来做什么的呢？主要作用是用于继承。举个例子：

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

从这个例子可以看出，通过给 Person.prototype 设置了一个函数对象的属性，那有 Person 的实例（person1）出来的普通对象就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。

小问题，上面两个 this 都指向谁？

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

故两次 this 在函数执行时都指向 person1。

推荐教程：《JS教程》

Das obige ist der detaillierte Inhalt vonDie ausführlichste Erklärung des JS-Prototyps und der Prototypenkette. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!