Qu'est-ce que le prototype exactement dans les conseils Javascript_javascript

Javascript est également un langage orienté objet, mais il s'agit d'un langage basé sur des prototypes plutôt que sur un langage basé sur des classes. En Javascript, il ne semble pas y avoir beaucoup de différence entre les classes et les objets.

Qu'est-ce qu'un prototype :

L'objet défini par la fonction a un attribut prototype, et l'attribut prototype pointe vers un objet prototype. Notez que l'attribut prototype et l'objet prototype sont deux choses différentes, alors faites attention à la différence. Il existe un autre attribut constructeur dans l'objet prototype. Cet attribut constructeur pointe également vers un objet constructeur, et cet objet constructeur est exactement la fonction elle-même. N'est-ce pas très compliqué ? Exprimé en pseudo code comme suit :

var function{
prototype:prototype{
constructor:constructor == function
}
}

Vous ne comprenez pas encore ? Jetez un œil à la photo :

Le rôle du prototype :

Que fait exactement ce prototype ? Regardez l'exemple ci-dessous :

function jb51(){
}
jb51.prototype.name = "a";
var test = new jb51();
alert(test.name)//"a";

C'est étrange, évidemment l'attribut name n'est pas défini pour le test, mais pourquoi y a-t-il une valeur ?

C'est la contribution de prototype. Le nom de l'objet dans l'attribut prototype dans uw3c est hérité dans l'attribut de l'objet test après la création de uw3c par le nouveau constructeur. Lire ensuite :

var name = "js";
function jb51(name){
alert(this.name);//"css"
}
jb51.prototype.name = "css";
var test = new jb51();
test()

Pourquoi la valeur d'alerte n'est-elle pas « js » ? Le processus est à peu près le suivant :

var test={};
uw3c.call(test);

La première étape consiste à créer un nouvel objet (test).

La deuxième étape consiste à définir l'objet prototype intégré de l'objet (test) sur l'objet prototype référencé par l'attribut prototype du constructeur (c'est-à-dire uw3c).

La troisième étape consiste à appeler le constructeur (c'est-à-dire uw3c) en utilisant l'objet (test) comme paramètre pour terminer le travail d'initialisation tel que le paramétrage des membres.

Un nouveau terme est apparu dans la deuxième étape, qui est l'objet prototype intégré. Notez que ce nouveau terme n'est pas la même chose que l'objet prototype. Pour le distinguer, je l'appelle inobj, et inobj pointe vers l'objet prototype. objet prototype de la fonction uw3c. Toutes les propriétés ou fonctions qui apparaissent dans l'objet prototype de uw3c peuvent être utilisées directement dans l'objet de test. Il s'agit de l'héritage de prototype en JS.

Habituellement, créez un objet comme celui-ci :

function person(name){
this.sayHi = function(){
alert('hi ' + this.name);
}
this.name = name;
}
var p = new person("dan");
p.sayHi(); 

Ci-dessus, utilisez le mot-clé new pour créer une instance d'objet via un objet (les fonctions sont également des objets spéciaux).

Dans les langages basés sur les classes, les attributs ou les champs sont généralement définis à l'avance dans la classe, mais en Javascript, les champs peuvent être ajoutés à la classe après la création de l'objet.

function animal(){}
var cat = new animal();
cat.color = "green"; 

Ci-dessus, le champ de couleur n'appartient qu'à l'instance de chat actuelle.
Pour les champs ajoutés ultérieurement, que se passe-t-il si vous souhaitez que toutes les instances d'animal les aient ?

--使用Prototype
function animal(){}
animal.prototype.color= "green";
var cat = new animal();
var dog = new animal();
console.log(cat.color);//green
console.log(dog.color);//green 

Non seulement des champs peuvent être ajoutés via Prototype, mais des méthodes peuvent également être ajoutées.

function animal(){}
animal.prototype.color= "green";
var cat = new animal();
var dog = new animal();
console.log(cat.color);//green
console.log(dog.color);//green
animal.prototype.run = funciton(){
console.log("run");
}
dog.run(); 

Il s'avère que grâce à l'attribut prototype, vous pouvez également modifier le comportement de l'objet après l'avoir créé.
Par exemple, vous pouvez ajouter une méthode à un objet spécial appelé tableau.

Array.prototype.remove = function(elem){
var index = this.indexof(elem);
if(index >= 0){
this.splice(index, 1);
}
}
var arr = [1, 2, 3] ;
arr.remove(2); 

En plus de définir des propriétés ou des méthodes pour les objets via le prototype, vous pouvez également définir des propriétés ou des méthodes de classe via le constructeur de l'objet.

function animal(){
this.color = "green";
this.run = function(){
console.log("run");
}
}
var mouse = new animal();
mouse.run(); 

L'approche ci-dessus peut également permettre à toutes les instances animales de partager tous les champs et méthodes. Et un autre avantage est que vous pouvez utiliser des variables locales de la classe dans le constructeur.

function animal(){
var runAlready = false;
this.color = "green";
this.run = funciton(){
if(!runAlreadh){
console.log("start running");
} else {
console.log("already running")
}
}
} 

En fait, une approche plus pratique consiste à définir les champs et les comportements d'une classe à travers le constructeur combiné au prototype.

function animal(){
var runAlready = false;
this.run = function(){
if(!runAlready){
console.log('i am running');
} else {
console.log("i am already running");
}
}
}
animal.prototype.color = '';
animal.prototype.hide = funciton(){
console.log("");
}
var horse = new animal();
horse.run();
horse.hide(); 

Le prototype nous permet de modifier le comportement d'un objet ou d'une classe après la création de l'objet, et ces champs ou méthodes ajoutés via l'attribut prototype sont partagés par toutes les instances d'objet.