Maison interface Web js tutoriel Comprendre le prototype dans les compétences JS_javascript

Comprendre le prototype dans les compétences JS_javascript

May 16, 2016 pm 03:40 PM

Chaque constructeur possède un attribut appelé prototype. Cet attribut est très utile pour déclarer des variables ou des fonctions communes pour une classe spécifique.

Définition du prototype

Vous n'avez pas besoin de déclarer explicitement un attribut de prototype car il existe dans chaque constructeur

Cet article s'appuie sur les points de connaissances suivants :

1 modèle de conception de prototype

Vous pouvez utiliser clone() pour implémenter la méthode prototype dans .Net

L'idée principale de la méthode prototype est qu'il existe maintenant une classe A, et je souhaite créer une classe B. Cette classe est basée sur A et peut être étendue. Nous appelons le prototype de B A.

2 méthodes JavaScript peuvent être divisées en trois catégories :

une méthode de classe

b Méthodes objets

méthode du prototype c

Exemple :

function People(name)
{
 this.name=name;
 //对象方法
 this.Introduce=function(){
 alert("My name is "+this.name);
 }
}
//类方法
People.Run=function(){
 alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
 alert("我的名字是"+this.name);
}
 
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese(); 
Copier après la connexion

3 méthodes obj1.func.call(obj)

Cela signifie traiter obj comme obj1 et appeler la méthode func

D'accord, résolvons les problèmes un par un :

Que signifie prototype ?

Chaque objet en JavaScript a un attribut prototype. L'explication de l'attribut prototype d'un objet en Javascript est la suivante : renvoyer une référence au prototype du type d'objet.

A.prototype = new B();

Comprendre le prototype ne doit pas être confondu avec l'héritage. Le prototype de A est une instance de B. On peut comprendre que A a cloné toutes les méthodes et propriétés de B. A peut utiliser les méthodes et propriétés de B. L'accent est ici mis sur le clonage plutôt que sur l'héritage. Cette situation peut se produire : le prototype de A est une instance de B, et le prototype de B est également une instance de A.

Regardons un exemple expérimental :

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg
Copier après la connexion

Nous définissons d'abord la classe baseClass, puis nous définissons extendClass, mais nous prévoyons d'utiliser une instance de baseClass comme prototype, et la classe extendée à cloner contient également la méthode objet showMsg.

extendClass.prototype = new baseClass() peut être lu comme : extendClass est créé en clonant une instance de baseClass comme prototype.

Ensuite, il y aura une question, et si extendClass lui-même contenait une méthode avec le même nom que la méthode de baseClass ?

Ce qui suit est l'expérience étendue 2 :

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//显示extendClass::showMsg
Copier après la connexion

Preuve expérimentale : lorsque la fonction est en cours d'exécution, elle recherchera d'abord la fonction dans l'ontologie. Si elle est trouvée, elle sera exécutée. Si elle ne peut pas être trouvée, elle recherchera la fonction dans le prototype. Ou on peut comprendre que le prototype ne clonera pas la fonction du même nom.

Ensuite il y aura une nouvelle question :
Que faire si je souhaite appeler la méthode objet showMsg de baseClass à l'aide d'une instance de extendClass ?

La réponse est d'utiliser l'appel :

extendClass.prototype = new baseClass();
var instance = new extendClass();

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg
Copier après la connexion

Le baseinstance.showMsg.call(instance); se lit ici comme "Appeler l'instance en tant que baseinstance et appeler sa méthode objet showMsg"
D'accord, quelqu'un ici pourrait demander pourquoi ne pas utiliser baseClass.showMsg.call(instance);

C'est la différence entre les méthodes objet et les méthodes de classe. Ce que nous voulons appeler est la méthode objet de baseClass

Enfin, si vous comprenez clairement le code suivant, alors vous pouvez comprendre ce que dit cet article :

<script type="text/javascript">
function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
 this.baseShowMsg = function()
 {
  alert("baseClass::baseShowMsg");
 }
}
baseClass.showMsg = function()
{
 alert("baseClass::showMsg static");
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.showMsg = function()
{
 alert("extendClass::showMsg static")
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg
baseClass.showMsg.call(instance);//显示baseClass::showMsg static
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg
</script>
Copier après la connexion

Le contenu ci-dessus concerne la compréhension du prototype en JS. J'espère qu'il vous plaira.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

Améliorez vos connaissances jQuery avec le spectateur source Améliorez vos connaissances jQuery avec le spectateur source Mar 05, 2025 am 12:54 AM

Améliorez vos connaissances jQuery avec le spectateur source

10 feuilles de triche mobiles pour le développement mobile 10 feuilles de triche mobiles pour le développement mobile Mar 05, 2025 am 12:43 AM

10 feuilles de triche mobiles pour le développement mobile

See all articles