Explication détaillée du prototype JS et de la chaîne de prototypes (1)

Cette fois, je vais vous donner une explication détaillée du prototype JS et de la chaîne de prototypes et à quoi il faut prêter attention. Voici un cas pratique, jetons un coup d'œil.

1. Objets ordinaires et objets fonctions

En JavaScript, tout est un objet ! Mais les objets sont également différents. Ils sont divisés en objets ordinaires et objets fonction. Object et Function sont les objets fonction fournis avec JS. Les exemples suivants illustrent

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

Dans l'exemple ci-dessus, o1 o2 o3 est un objet ordinaire et f1 f2 f3 est un objet fonction. Comment faire la différence est en fait très simple. Tous les objets créés via new Function() sont des objets fonction, et les autres sont des objets ordinaires. f1, f2, sont tous créés via new Function() en dernière analyse. Les objets de fonction sont également créés via New Function().

Assurez-vous de faire la distinction entre les objets ordinaires et les objets fonctionnels. Nous l'utiliserons fréquemment ci-dessous.

2. Constructeur

Passons d'abord en revue les connaissances du constructeur :

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

Dans l'exemple ci-dessus, personne1 et personne2 sont toutes deux des instances de Personnes. . Les deux instances ont une propriété constructeur, qui est un pointeur vers Person. C'est à dire :

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

Nous devons retenir deux concepts (constructeur, instance) :
personne1 et personne2 sont toutes deux des instances du constructeur Personne
Une formule :
Construction des instances Le L'attribut de fonction (constructeur) pointe vers le constructeur.

3. Objet prototype

En JavaScript, chaque fois qu'un objet (une fonction est aussi un objet) est défini, l'objet contiendra des propriétés prédéfinies. Chaque objet fonction possède un attribut prototype, qui pointe vers l'objet prototype de la fonction. (Utilisez d'abord __proto__. Le deuxième cours l'analysera en détail)

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

Nous avons la première "loi" de cet article :

Chaque objet a l'attribut _ _proto__, mais seulement une fonction les objets ont l'attribut prototype

Alors, qu'est-ce qu'un objet prototype ?
Si on change l'exemple ci-dessus, vous comprendrez :

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

L'objet prototype, comme son nom l'indique, est un objet ordinaire (non-sens = =!). A partir de maintenant, vous devez vous rappeler que l'objet prototype est Person.prototype. Si vous en avez toujours peur, considérez-le comme une lettre A : var A = Person.prototype

Ci-dessus, nous avons donné A Quatre attributs. sont ajoutés : nom, âge, emploi, sayName. En fait, il a également un attribut par défaut : constructeur

Par défaut, tous les objets prototypes obtiendront automatiquement un attribut constructeur (constructeur), qui (est un pointeur) pointe vers la fonction où se trouve l'attribut prototype ( Person)

La phrase ci-dessus est un peu déroutante, "traduisons-la" : A a un attribut constructeur par défaut, qui est un pointeur pointant vers Person. C'est-à-dire :

Person.prototype.constructor == Person

Dans la deuxième section "Constructeur" ci-dessus, nous savons que l'attribut constructeur (constructeur) de l'instance pointe vers le constructeur : personne1.constructeur == Personne

Ces deux "formules" semblent être quelque peu liées :

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

Pourquoi person1 a-t-il l'attribut constructeur ? C'est parce que person1 est une instance de Person.
Alors pourquoi Person.prototype a-t-il un attribut constructeur ? ? De même, Person.prototype (considérez-le comme A) est également une instance de Person.
C'est-à-dire que lorsque Person est créé, un objet instance de celui-ci est créé et attribué à son prototype. Le processus de base est le suivant :

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

Conclusion : L'objet prototype (Person.prototype) est une instance du constructeur (Person).

Les objets prototypes sont en fait des objets ordinaires (sauf Function.prototype, qui est un objet fonction, mais il est très spécial. Il n'a pas d'attribut prototype (comme mentionné précédemment, les objets fonction ont tous des attributs prototype)). Regardez l'exemple suivant :

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 Pourquoi est-ce un objet fonction ?

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

Comme mentionné ci-dessus, tous les objets générés par new Function() sont des objets fonction. Parce que A est un objet fonction, Function.prototype est un objet fonction.

A quoi sert l'objet prototype ? Principalement utilisé pour l'héritage. Par exemple :

 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

Comme le montre cet exemple, en définissant une propriété d'un objet fonction sur Person.prototype, l'objet ordinaire qui sort de l'instance Person (person1) hérite de cette propriété. . La manière d'implémenter l'héritage dépend spécifiquement de la chaîne de prototypes ci-dessous.

Petite question, à qui les deux ci-dessus désignent-ils ?

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

Donc, les deux fois, cela pointe vers person1 lorsque la fonction est exécutée.

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!