Guide d'apprentissage du prototype en JavaScript_Connaissances de base

Qu'est-ce qu'un prototype

Le type de fonction a une propriété prototype, qui est directement traduite par prototype. Cet attribut est un pointeur pointant vers un objet. Cet objet contient certaines propriétés et méthodes. Ces propriétés et méthodes seront partagées par toutes les instances (objets) générées par la fonction actuelle.

Sur la base de ce qui a été dit précédemment, si vous y réfléchissez bien, vous pouvez obtenir le code suivant :

function Person(){
 ...
}
Person.prototype = {
 country : 'china',
 sayName : function(){
  ...
 }
}

Créez d'abord une instance de type Function person, puis le prototype de méthode de person est un objet, il est donc déclaré pointer vers un objet. Les propriétés et méthodes de cet objet seront partagées par l'instance générée par la fonction de personne actuelle. C'est à dire :

person1 = new Person();
person2 = new Person();

Person1 et person2 sont tous deux des instances régénérées via l'instance de type Person Function. Ils ont tous deux le même attribut country et la même méthode sayName, car ils ont tous deux un pointeur (__proto__) qui pointe directement vers l'objet Person.prototype. Attention cependant, le pointeur __proto__ n'est pas standard. Il est uniquement défini par les navigateurs tels que Chrome et Firefox. En pratique, cet attribut n'est pas utilisé pour comprendre le prototype :
.

Les utilisations telles que les prototypes seront discutées plus en détail plus tard.

Mode de création d'objets

Ensuite, examinons les méthodes et les modèles courants de création d'objets, ainsi que leurs avantages et inconvénients.

1. Mode usine

Tout comme une usine, il résume le processus de création d'objets spécifiques et utilise des fonctions pour encapsuler les détails de la création d'objets avec des interfaces spécifiques. En utilisant des fonctions pour remplacer une partie de la duplication de travail, le code est le suivant :

function createPerson(name, age, job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name);
 };
 return o;
}
var person1 = createPerson("jiangshui","22","engineer");

De cette façon, une personne est créée. Le modèle d'usine résout le problème de la création répétée de plusieurs objets similaires, mais ne résout pas le problème de la reconnaissance des objets. Un objet est simplement créé, qu'il soit créé à partir d'un modèle humain ou d'un modèle animal, et le type de l'objet ne peut pas être distingué.

2. Modèle de constructeur

Créez un constructeur personnalisé pour définir les propriétés et les méthodes du type d'objet personnalisé.

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = jpb;
 this.sayName = function(){
  alert(this.name);
 };
};
var person1 = new Person(...);

3. La différence entre le modèle de constructeur et le modèle d'usine :

• Pas de création d'objet explicite.
• Attribuez des propriétés et des méthodes directement à cet objet.
• Aucune déclaration de retour.

Person est un objet de type Fonction. Après new, un objet continuera à être généré, mais cet objet nouvellement généré, car les paramètres sont passés dans la fonction et attribués au pointeur this, alors le contenu transmis devient Le propriétés ou méthodes de l’objet nouvellement généré.

La convention par défaut pour les constructeurs est de mettre la première lettre en majuscule. L'exécution du code ci-dessus passe par les étapes suivantes :

• Créer un nouvel objet
• Attribuer la portée du constructeur au nouvel objet
• Exécuter le code dans le constructeur
• Renvoyer le nouvel objet

Les instances ainsi générées contiennent par défaut un attribut constructeur pointant vers le constructeur, par exemple :

alert(person1.constructor == Person);

Ainsi, en utilisant le modèle constructeur, il existe une distinction entre les types et ses instances peuvent être identifiées comme un type spécifique.

De plus, le constructeur est une fonction ordinaire Parce qu'il a besoin de retour pour obtenir un nouvel objet, il est appelé avec new. Sinon, l'exécution directe est la même qu'une fonction normale. Par exemple, l'exécution de Person.sayName() ci-dessus fera apparaître window.name. Parce que la fonction est exécutée sous la fenêtre, cela pointe vers la fenêtre.

Le modèle de constructeur est également défectueux. Les méthodes du modèle de constructeur sont recréées sur chaque instance, donc les fonctions portant le même nom sur différentes instances ne sont pas égales. Par exemple :

person1.sayName == person2.sayName; //false

En d'autres termes, chaque instance d'objet, propriété et méthode générée par le constructeur est unique et est copiée. Il est nécessaire de rendre les attributs uniques, car c'est là que les objets diffèrent, mais de nombreuses fonctions et codes de méthode sont identiques. Les répéter plusieurs fois gaspillera évidemment des ressources.

Nous pouvons donc placer la fonction à l'extérieur, puis utiliser un pointeur pour pointer vers cette fonction dans le constructeur. Ensuite, dans l'instance générée, la méthode stocke un pointeur vers une certaine fonction, et nous partageons la même fonction : <🎜. >

function Person(name, age){
 this.name = name;
 this.age = age;
 this.sayName = sayName;
}
function sayName(){
 alert(this.name);
}

function Person(){
 ....
}
Person.prototype.name = "jiangshui";
Person.prototype.sayName = function(){
 alert(this.name);
};

var person1 = new Person();
person1.sayName(); //jiangshui

Person.prototype = {
 constructor : Person,
 name : "jiangshui",
 sayName : function(){
  alert(this.name);
 }
};

Person.prototype.isPrototypeOf(person1);

String.prototype.startsWith = function(text){
 return this.indexOf(text) == 0;
};
var msg = "Hello World";
msg.startsWith("Hello");

function Person(){}
Person.prototype = {
 constructor : Person,
 friends : ["greg","jack"]
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("tom");
console.log(person2.friends);

function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.friends = ["greg","jack"];
}
Person.prototype = {
 constructor : Person,
 sayName : function(){
  alert(this.name);
 }
};
var jiangshui = new Person("jiangshui","22","engineer");

function f1(){
  //todo
}
var f2 = function(){
  //todo
};
var f3 = new Function('x','console.log(x)');
 
var o1 = {};
var o2 = new Object();
var o3 = new f1();
 
console.log(
  typeof f1,//function
  typeof f2,//function
  typeof f3,//function
  typeof o1,//object
  typeof o2,//object
  typeof o3 //object
);
>> function function function object object object

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc