Explication détaillée du prototype JavaScript et des exemples d'héritage

Chaîne de prototypes

Chaque objet en JavaScript a un attribut _proto_ intégré. Cet attribut n'est pas visible pour la programmation. Un objet ou une référence à <.>nul.

Lorsqu'un objet fait référence à un attribut, le moteur JavaScript le recherchera d'abord dans la propre table d'attributs de l'objet. S'il est trouvé, il effectuera la correspondance. opérations de lecture et d'écriture. S'il n'est pas trouvé dans sa propre table attributaire, recherchez dans la table attributaire de l'objet référencé par l'attribut _proto_, et ainsi de suite jusqu'à ce que l'attribut soit trouvé ou le attribuez des points à Jusqu'à _proto_. null

La chaîne de référence de est appelée la _proto_chaîne prototype.

Notez qu'il y a ici un problème d'optimisation des performances : plus vous recherchez profondément dans la chaîne de prototypes, plus cela prend de temps.

Chaîne et constructeur de prototypes

JavaScript est un langage orienté objet et peut faire de l'

. La fonction en JavaScript a un attribut

Cet attribut prototype est un objet, et l'un de ses attributs est prototype. Référencez la fonction elle-même. C'est-à-dire : constructor

 func.prototype.constructor === func; // ==> true

La propriété new de cet objet fait référence à la propriété _proto_ prototype de son constructeur. Donc ce n'est pas difficile à comprendre :

var obj = new Func();

obj.constructor == Func; // ==> true

obj instanceof Func; // ==> true

sur la chaîne prototype. Les propriétés constructor

sont des références au même objet _proto_. Ainsi, la modification de l'objet prototype affectera toutes les instances. prototypePlusieurs façons d'implémenter l'héritage des "sous-classes"

La raison pour laquelle les sous-classes doivent être entre guillemets est que le concept de "classe" n'est pas rigoureux ici. JavaScript est un langage orienté objet, mais contrairement à Java et à d'autres langages, il ne dispose pas de définitions de classe avant la publication de la norme ES6.

Cependant, les programmeurs familiers avec des langages tels que Java espèrent également qu'en utilisant JavaScript, ils pourront générer des instances via des classes et réutiliser le code via des sous-classes, de la même manière qu'avec Java. Alors avant ES6, comment utiliser une méthode de type « classe » comme le code suivant ?

var parent = new Parent("Sam");var child = new Children("Samson");

parent.say(); // ==> "Hello, Sam!"child.say(); // ==> "Hello, Samson! hoo~~"child instanceof Parent; // ==> true

Discutons de plusieurs façons de l'implémenter :

La manière la plus simple

Combinée au concept de chaîne de prototypes, nous pouvons facilement écrire du code comme celui-ci :

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

Parent.prototype.say = function(){
    console.log("Hello, " + this.name + "!");
}function Children(name){this.name = name;
}

Children.prototype = new Parent();

Children.prototype.say = function(){
    console.log("Hello, " + this.name + "! hoo~~");
}

de cet objet sont complètement inutiles. nameLa première amélioration

// ...Children.prototype = Parent.prototype;// ...

Cependant, dans ce cas, les prototypes de la sous-classe et de la classe parent font référence au même objet, et la modification du

de la sous-classe affectera également le prototype de la classe parent. prototypeA cette époque nous avons découvert :

parent.say(); // ==> "Hello，Sam! hoo~~"

La deuxième amélioration - constructeur temporaire/

function F(){  // empty  }

F.prototype = Parent.prototype;

Children.prototype = new F();// ...parent.say(); // ==> "Hello, Sam!"child.say();  // ==> "Hello, Samson! hoo~~"

de F et ne change pas , résolvant ainsi le problème ci-dessus. Parent.prototypeA l'ère de

, on peut aussi le faire directement :

function Children(name){
    Parent.apply(this, arguments);// do other initial things}

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

Parent.prototype.say = function(){
    console.log("Hello, " + this.name + "!");
}function Children(name){
    Parent.apply(this, arguments);// do other initial things}function F(){  // empty  }

F.prototype = Parent.prototype;

Child.prototype = new F();

Children.prototype.say = function(){
    console.log("Hello, " + this.name + "! hoo~~");
}

Parent.prototype.a = { x: 1};// ...

parent.x // ==> 1child.x  // ==> 1child.x = 2;
parent.x // ==>2

class Parent {
    constructor(name) { //构造函数  this.name = name;
    }
    say() {
          console.log("Hello, " + this.name + "!");
    }
}

class Children extends Parent {
    constructor(name) { //构造函数super(name);    //调用父类构造函数// ...    }
    say() {
          console.log("Hello, " + this.name + "! hoo~~");
    }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!