Analyse détaillée des prototypes JavaScript et des chaînes de prototypes-js tutoriel-php.cn

Analyse détaillée des prototypes JavaScript et des chaînes de prototypes

黄舟

Libérer： 2017-03-14 15:03:17

original

1083 Les gens l'ont consulté

JavaScript n'a pas la notion de classes, mais presque tout est basé sur des Objets, et il peut aussi implémenter l'l'héritage, c'est js La plus grande différence avec les autres langages POO est que c'est aussi la partie la plus difficile de js à comprendre. Permettez-moi de parler de ma compréhension personnelle ci-dessous.

Tout d'abord, commençons par créer un objet Généralement, il existe les méthodes suivantes :

1 Créer une instance de Objet. puis ajoutez-le Propriétés et méthodes.

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

Copier après la connexion

2. Vous pouvez également écrire comme ceci :

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

Copier après la connexion

3. Ces deux méthodes de création d'objets sont très simples, mais elles présentent des défauts lorsqu'elles utilisent le même mode. créer des objets, générera beaucoup de code en double. Il y a donc 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;);

Copier après la connexion

De cette façon, vous pouvez créer un nombre illimité d'objets.

4. Il existe une autre méthode, similaire au modèle d'usine, appelée modèle Constructeur :

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

Copier après la connexion

Il y a quelques éléments auxquels il convient de prêter attention ici. : non affiché Lors de la création d'un objet, le nom de la fonction Personne utilise la lettre majuscule P (cela est obligatoire). P1 et p2 ont tous deux un attribut constructeur pointant vers Personne. En même temps, p1 et p2 sont à la fois des instances d’Object et des instances de Person.

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

Copier après la connexion

//5.11Mise à jour : D'un point de vue PHPer, il était facile de penser au processus de création d'objets comme celui-ci. La personne est une "classe", puis d'utiliser <. 🎜> J'ai instancié cette classe et transmis les paramètres. Mais ce n'est pas réellement le cas. Le processus de création devrait être comme ceci : créez d'abord un objet vide, puis utilisez la méthode apply. Le premier paramètre est l'objet vide et le deuxième paramètre est le paramètre de contexte, de sorte que cela. en Personne Il pointera vers cet objet, qui est p1. new Person('mikej')

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

Copier après la connexion

Le modèle du constructeur a l'air bien, mais il a l'inconvénient de gaspiller de la mémoire. Continuez avec l'exemple

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

Copier après la connexion

Afin d'éviter ce défaut, utilisez le

. Analyse détaillée des prototypes JavaScript et des chaînes de prototypes Pattern pour créer des objets. Chaque objet dans js a un attribut Analyse détaillée des prototypes JavaScript et des chaînes de prototypes qui pointe vers un autre objet. Toutes les propriétés et méthodes de cet objet seront héritées par l'instance du constructeur et sont partagées. propriétés et méthodes immuables sur l’objet Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.

function Person(name){
  this.name = name;
}
//Person的原型对象
Person.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes = {
  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

Copier après la connexion

Étendons l'exemple ci-dessus et utilisons des Analyse détaillée des prototypes JavaScript et des chaînes de prototypess pour implémenter l'héritage.

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

Person.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes = {
  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.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes = new Person(&#39;mikej&#39;);
//手动修正构造函数
Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.constructor = Programmer;
var p1 = new Programmer();

console.dir(Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.constructor);//Programmer
console.dir(p1.constructor);//Programmer
console.dir(p1);

Copier après la connexion

Le Analyse détaillée des prototypes JavaScript et des chaînes de prototypes du programmeur pointe vers une instance de Person, puis toutes les instances du programmeur peuvent hériter du Analyse détaillée des prototypes JavaScript et des chaînes de prototypes de Person et de Person.

Il y aura un problème ici.

L'objet Analyse détaillée des prototypes JavaScript et des chaînes de prototypes par défaut a un attribut constructeur pointant vers son constructeur. Chaque instance possède également un attribut constructeur, qui appellera par défaut l'attribut constructeur de l'objet Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.

Supposons qu'il n'y ait pas de

Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes = new Person('mikej');

Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.constructor pointant vers Programmer. La construction de p1 pointe également vers Programmer

alert(Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.constructor == Programmer) //true
alert(p1.constructor == Programmer) //true

Copier après la connexion

Mais après cette phrase

, Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes = new Person('mikej');

Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.constructor pointe vers Object, qui est l'objet pointé par Person.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes structure. p1.constructor pointe également vers Object. Mais p1 est évidemment généré par le constructeur Programmer, ce qui provoque une confusion d'héritage, il faut donc corriger manuellement le constructeur, qui est le code ci-dessous.

Programmer.Analyse détaillée des prototypes JavaScript et des chaînes de prototypes.constructor = Programmer;

Copier après la connexion

Bien, regardons maintenant la chaîne Analyse détaillée des prototypes JavaScript et des chaînes de prototypes :

console.dir(p1);

Copier après la connexion

Le résultat de ce code est

Analyse détaillée des prototypes JavaScript et des chaînes de prototypes

On peut voir que p1 est une instance de Programmer, le Analyse détaillée des prototypes JavaScript et des chaînes de prototypes de Programmer est Person, le Analyse détaillée des prototypes JavaScript et des chaînes de prototypes de Person est Object et c'est l'objet de JS sur Internet. Il s'agit de la chaîne de Analyse détaillée des prototypes JavaScript et des chaînes de prototypess, c'est-à-dire que l'héritage JavaScript est implémenté sur la base de la chaîne de Analyse détaillée des prototypes JavaScript et des chaînes de prototypess.

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!