Detaillierte Analyse von JavaScript-Prototypen und Prototypketten-js-Tutorial-php.cn

Detaillierte Analyse von JavaScript-Prototypen und Prototypketten

黄舟

Freigeben： 2017-03-14 15:03:17

Original

1084 Leute haben es durchsucht

JavaScript verfügt nicht über das Konzept von Klassen, aber fast alles basiert auf Objekten und kann auch Vererbung implementieren, das ist js Der größte Unterschied zu anderen OOP-Sprachen besteht darin, dass dies auch der am schwierigsten zu verstehende Teil von js ist. Lassen Sie mich im Folgenden über mein persönliches Verständnis sprechen.

Beginnen wir zunächst mit der Erstellung eines Objekts. Im Allgemeinen gibt es die folgenden Methoden:

1. Erstellen Sie eine Instanz von Objekt und fügen Sie es dann Eigenschaften und Methoden hinzu.

var person() = new Object();
person.name = &#39;mikej&#39;;
person.sayName = function(){
  alert(this.name);
}

Nach dem Login kopieren

2. Sie können auch so schreiben:

var parson = {
  name : &#39;mikej&#39;,
  sayName : function(){
    alert(this.name);
  }
}

Nach dem Login kopieren

3. Diese beiden Methoden zum Erstellen von Objekten sind sehr einfach, weisen jedoch Mängel auf Wenn Sie Objekte erstellen, wird viel doppelter Code generiert. Es gibt also Factory Pattern:

function createPerson(name){
  var p = new Object();
  p.name=name;
  p.sayName = function(){
    alert(this.name);
  };
  return p;
}
var p1 = createPerson(&#39;mikej&#39;);
var p2 = createPerson(&#39;tom&#39;);

Nach dem Login kopieren

Auf diese Weise können Sie unbegrenzt viele Objekte erstellen.

4. Es gibt eine andere Methode, die dem Factory-Muster ähnelt, das sogenannte Konstruktor--Muster:

function Person(name){
  this.name=name
  this.sayName = function(){
   alert(this.name);
  }
  this.say = function(){
    alert(&#39;hi&#39;);
  }
}
var p1 = new Person(&#39;mikej&#39;);
var p2 = new Person(&#39;tom&#39;);

Nach dem Login kopieren

Hier gibt es einige Dinge, die es zu beachten gilt : wird nicht angezeigt. Beim Erstellen eines Objekts wird für den Funktionsnamen Person der Großbuchstabe P verwendet (dies ist erforderlich. Sowohl p1 als auch p2 verfügen über ein Konstruktorattribut, das auf Person verweist. Gleichzeitig sind p1 und p2 sowohl Instanzen von Object als auch Instanzen von Person.

alert(p1.constructor == Person); //true
alert(p1 instanceof Object); //true
alert(p1 instanceof Person); //true

Nach dem Login kopieren

//5.11Update: Aus PHP-Perspektive war es einfach, sich den Prozess der Erstellung solcher Objekte als „Klasse“ vorzustellen und dann < zu verwenden 🎜>Diese Klasse instanziiert und die Parameter übergeben. Dies ist jedoch nicht der Fall. Der Erstellungsprozess sollte folgendermaßen aussehen: Erstellen Sie zunächst ein leeres Objekt und verwenden Sie dann die Apply-Methode. Der erste Parameter ist das leere Objekt und der zweite Parameter ist der Kontextparameter persönlich Es zeigt auf dieses Objekt, nämlich p1. new Person('mikej')

var p1 = new Person(&#39;mikej&#39;);
//上面代码就相当于
var p1 = {};
Person.apply(p1, [&#39;mikej&#39;]);

Nach dem Login kopieren

Das Konstruktormuster sieht gut aus, hat aber den Nachteil, dass es Speicher verschwendet

alert(p1.say == p2.say) //false

Nach dem Login kopieren

Um diesen Fehler zu vermeiden, verwenden Sie das

Prototypmuster zum Erstellen von Objekten. Alle Eigenschaften und Methoden dieses Objekts werden von der Instanz des Konstruktors geerbt. Dies bedeutet, dass wir diese definieren können unveränderliche Eigenschaften und Methoden für das Prototypobjekt.

function Person(name){
  this.name = name;
}
//Person的原型对象
Person.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten = {
  say: function(){
    alert(&#39;hi&#39;);
  },
  sayName: function(){
    alert(this.name);
  }
};
var p1 = new Person("mikej");
var p2 = new Person("tom");
p1.sayName();
p2.sayName();
//下面就可以看出方法实现了共享
alert(P1.say == P2.say) //true
alert(P1.sayName == P2.sayName) //true

Nach dem Login kopieren

Erweitern wir das obige Beispiel und verwenden Prototypen, um die Vererbung zu implementieren.

function Person(name){
  this.name = name;
}

Person.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten = {
  say: function(){
    alert(&#39;hi&#39;);
  },
  sayName: function(){
    alert(this.name);
  }
};

function Programmer(){
  this.say = function(){
    alert(&#39;im Programmer, my name is &#39; + this.name);
  }
}

Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten = new Person(&#39;mikej&#39;);
//手动修正构造函数
Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten.constructor = Programmer;
var p1 = new Programmer();

console.dir(Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten.constructor);//Programmer
console.dir(p1.constructor);//Programmer
console.dir(p1);

Nach dem Login kopieren

Der Prototyp des Programmierers verweist auf eine Instanz von Person, dann können alle Instanzen des Programmierers Person und Persons Prototyp erben.

Hier wird es ein Problem geben.

Das Standardprototypobjekt verfügt über ein Konstruktorattribut, das auf seinen Konstruktor verweist. Jede Instanz verfügt außerdem über ein Konstruktorattribut, das standardmäßig das Konstruktorattribut des Prototypobjekts aufruft.

Angenommen, es gibt keinen

Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten = new Person('mikej');

Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten.constructor, der auf Programmer verweist. Die Konstruktion von p1 zeigt auch auf Programmer

alert(Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten.constructor == Programmer) //true
alert(p1.constructor == Programmer) //true

Nach dem Login kopieren

Aber nach diesem Satz

zeigt Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten = new Person('mikej');

Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten.constructor auf Object, das das Objekt ist, auf das Person.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten zeigt Struktur. p1.constructor zeigt auch auf Object. P1 wird jedoch offensichtlich vom Konstruktorprogrammierer generiert, was zu Verwirrung bei der Vererbung führt. Daher müssen wir den Konstruktor manuell korrigieren, bei dem es sich um den folgenden Code handelt.

Programmer.Detaillierte Analyse von JavaScript-Prototypen und Prototypketten.constructor = Programmer;

Nach dem Login kopieren

Okay, jetzt werfen wir einen Blick auf die Prototypenkette:

console.dir(p1);

Nach dem Login kopieren

Das Ergebnis dieses Codes ist

Detaillierte Analyse von JavaScript-Prototypen und Prototypketten

Es ist ersichtlich, dass p1 eine Instanz von Programmer ist, der Prototyp von Programmer eine Person ist, der Prototyp von Person ein Objekt ist und das Objekt von JS im Internet ist. Dies ist die Prototypenkette, das heißt, die JavaScript-Vererbung wird basierend auf der Prototypenkette implementiert.

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse von JavaScript-Prototypen und Prototypketten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!