Exemples d'objets d'instance et d'objets prototypes dans les connaissances JavaScript_Basic

Tout d'abord, déclarez : chaque objet en JavaScript a un attribut constructeur et un attribut prototype. constructor pointe vers le constructeur de l'objet et prototype pointe vers l'objet prototype de l'instance d'objet créée à l'aide du constructeur.

function Person(){ 
  
 } 
var person = new Person(); 
 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
 } 
  
person.sayName(); 

Une erreur sera signalée dans ce code, sayName() n'est pas défini. Selon JavaScript Advanced Programming Second Edition, c'est parce que le prototype remplacé coupe la connexion entre le constructeur et le prototype d'origine. Mais ajustons l’ordre des déclarations ci-dessus. Comme suit :

function Person(){ 
 } 
//var person = new Person(); 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
} 
/*===========================================================*/ 
var person = new Person(); 
/*===========================================================*/ 
 person.sayName(); // zxs 
alert(person.constructor) //function Object() { [native code]} or function Person() {} 取决与蓝色的语句是否有效 

Faites attention aux déclarations entre les signes égal dans les deux morceaux de code ci-dessus. Si vous écrivez le code dans l'ordre du deuxième paragraphe, "zxs" sera affiché. Ce résultat montre que l'erreur signalée dans le premier cas ne signifie pas qu'elle est causée par la coupure de la connexion entre le constructeur et l'idée originale. .

Person.prototype = ｛｝ 

C'est à l'origine une façon de définir des objets, et l'attribut constructeur de chaque objet en JavaScript pointe vers le constructeur d'objet par défaut. Il n'est pas difficile de montrer que la réécriture de l'objet prototype coupe la connexion entre le constructeur et le. prototype original. connexion, mais cela ne signifie pas que cette personne ne peut pas accéder à la fonction sayName() une fois cette connexion interrompue.

Maintenant, il y a cette hypothèse : l'objet prototype pointé par l'attribut prototype de la fonction n'est pas exactement le même que l'objet prototype nouvellement créé que nous affichons. Lorsque nous appelons une fonction, un objet prototype sera créé. À ce stade, nous vérifierons d'abord si son objet prototype existe dans l'environnement actuel, s'il n'existe pas dans le programme, créez-en un. nous rechercherons leurs propriétés et méthodes. Enfin, un objet prototype est renvoyé en fonction du résultat de la recherche. Les propriétés et méthodes de cet objet utilisent toujours en premier les propriétés et méthodes du prototype par défaut, c'est-à-dire les propriétés et méthodes définies dans. le constructeur. Lorsque la méthode ou la propriété appelée n'existe pas dans le prototype par défaut, les propriétés et méthodes définies dans Person.prototype = {} sont utilisées.

Javascript est un langage interprété, et les instructions sont exécutées séquentiellement, dans le premier morceau de code, lorsque nous utilisons le mot-clé new pour créer un nouvel objet, Person.prototype = {} n'est pas exécuté, ce qui signifie que les méthodes et. les propriétés qui y sont définies sont introuvables dans l'environnement d'exécution actuel et la méthode n'existe pas dans le constructeur, une erreur se produit donc. Tout comme une variable, elle ne peut pas être utilisée lorsque le programme n'est pas exécuté lors de l'attribution d'une valeur. Dans le deuxième paragraphe, la méthode appelée existe déjà dans l'environnement, et l'objet prototype du constructeur a été créé, le résultat peut donc être obtenu.

Regardez le programme suivant :

////////////////////////////////////////////////////////////////////////// 
 
function Person(){} 
 
/*===========================================================*/ 
 
 var person = new Person(); 
Person.prototype.name = 'song'; 
 
/*===========================================================*/ 
 
//Person.prototype.sayName = function(){alert(this.name)}; 
Person.prototype = { 
constructor : Person, 
name : 'zxs', 
age : 24, 
sayName : function(){alert(this.name)} 
} 
person.sayName(); // error 
 
////////////////////////////////////////////////////////////////////////// 
 
function Person(){  } 
/*var person = new Person();*/ 
Person.prototype.name = 'song';  
/*Person.prototype.sayName = function(){alert(this.name)};*/ 
Person.prototype = {   
constructor : Person, 
  name : 'zxs', 
  age : 24, 
  sayName : function(){alert(this.name)} 
} 
 
/*===========================================================*/ 
var person = new Person(); 
 
/*===========================================================*/ 
person.sayName(); // zxs 

On peut voir d'ici qu'en utilisant Person.prototype.name = '', l'objet est accessible quel que soit l'endroit où il est créé. S'il existe à la fois un objet littéral et un objet prototype défini par cette méthode, le dernier est défini. l'objet défini sera utilisé comme valeur finale. Et après avoir utilisé une définition littérale d'objet pour un objet prototype, la définition doit apparaître avant l'instruction qui crée l'objet avant de pouvoir y accéder.

Les instances ne peuvent pas accéder aux propriétés et aux méthodes de l'objet prototype, notamment parce que le remplacement de l'objet prototype coupe la connexion entre le constructeur et le prototype d'origine.

function Person(){  
    
  }  
var person = new Person();  
  
Person.prototype = {  
  //constructor : Person,  
  name : 'zxs',  
  age : 24,  
  sayName : function(){alert(this.name)}  
  }  
    
person.sayName();  

Le prototype de la fonction constructeur dans le code ci-dessus est vide lors de l'instanciation de l'objet, et il n'a aucune propriété autre que les propriétés par défaut. Remplacer le prototype du constructeur rompt le lien entre le constructeur et le prototype d'origine.

Après avoir utilisé l'opérateur new, les propriétés et méthodes de l'objet prototype du constructeur ont été ajoutées à l'objet personne. Étant donné que la méthode ci-dessus n'est pas dynamique dans l'ajout de nouvelles propriétés et méthodes au prototype de fonction, personne ne peut accéder aux propriétés et méthodes nouvellement ajoutées.

Après avoir réécrit l'objet prototype, il ressemblera au code suivant :

var o = { 
  name : 'zxs' 
  } 
   
var obj = o; 
o = {} 
console.log(o.name);  

La valeur de sortie à ce moment n'est pas définie, car l'objet est un type référence, "=" est l'opérateur d'affectation et l'ordre des opérations est de droite à gauche. o={} signifie que le point de o a changé et est un objet vide.
La différence entre Person.prototype.mothed = function() {} et Person.prototype={mothed:function(){}} est la même que arr = [] et arr.push(). Le premier se modifie, tandis que le premier se modifie. ce dernier se modifie complètement.