Introduction à l'utilisation du prototype JavaScript

Les étudiants qui ont utilisé JavaScript doivent être familiers avec le prototype, mais les débutants ne savent pas de quoi il s'agit. Ils savent seulement que les fonctions ont un attribut de prototype, et les fonctions peuvent être ajoutées par exemple, d'autres ne sont pas claires. a récemment examiné une programmation JavaScript avancée et a finalement dévoilé son mystère.

Chaque fonction a un attribut prototype, qui est une référence à un objet. Cet objet est appelé objet prototype. L'objet prototype contient des méthodes et des propriétés partagées par les instances de fonction, ce qui signifie que la fonction est utilisée comme un objet prototype. constructeur. Lorsqu'une fonction est appelée (appelée à l'aide de l'opérateur new), l'objet nouvellement créé hérite des propriétés et des méthodes de l'objet prototype.

Variables et fonctions privées

Avant de parler du prototype en détail, parlons de quelques éléments connexes afin que nous puissions mieux comprendre l'intention de conception du prototype. Un article sur l'espace de noms JavaScript que j'ai écrit auparavant mentionnait la portée des fonctions de JavaScript. Si les variables et les fonctions définies dans la fonction ne fournissent pas d'interface avec le monde extérieur, elles ne seront pas accessibles au monde extérieur, c'est-à-dire qu'elles deviendront privées. variables et fonctions privées.

function Obj(){
                var a=0; //私有变量
                var fn=function(){ //私有函数

                }
            }

De cette façon, la variable a et la fonction fn ne sont pas accessibles en dehors de l'objet fonction Obj. Elles deviennent privées et ne peuvent être utilisées qu'à l'intérieur d'Obj. Même les instances de la fonction Obj ne peuvent toujours pas accéder à ces variables et. fonctions.

var o=new Obj();
            console.log(o.a); //undefined
            console.log(o.fn); //undefined

Variables et fonctions statiques

Lorsqu'une fonction est définie et que les attributs et fonctions qui y sont ajoutés via "." sont toujours accessibles via l'objet lui-même, ses instances ne peuvent pas être accédés. Oui, ces variables et fonctions sont appelées respectivement variables statiques et fonctions statiques. Les étudiants qui ont utilisé Java et C# peuvent facilement comprendre la signification de statique.

function Obj(){

            }

            Obj.a=0; //静态变量

            Obj.fn=function(){ //静态函数

            }

            console.log(Obj.a); //0
            console.log(typeof Obj.fn); //function

            var o=new Obj();
            console.log(o.a); //undefined
            console.log(typeof o.fn); //undefined

Variables d'instance, fonctions

En programmation orientée objet, en plus de certaines fonctions de bibliothèque, on espère toujours définir certaines propriétés et méthodes en même temps que l'objet est défini , accessible après instanciation, JavaScript Cela peut également être fait comme ceci

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

                }
            }

            console.log(typeof Obj.a); //undefined
            console.log(typeof Obj.fn); //undefined

            var o=new Obj();
            console.log(typeof o.a); //object
            console.log(typeof o.fn); //function

Cela peut atteindre l'objectif ci-dessus, cependant,

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

                }
            }

            var o1=new Obj();
            o1.a.push(1);
            o1.fn={};
            console.log(o1.a); //[1]
            console.log(typeof o1.fn); //object
            var o2=new Obj();
            console.log(o2.a); //[]
            console.log(typeof o2.fn); //function

Les résultats de l'exécution du code ci-dessus sont complètement. conforme aux attentes, mais cela illustre également un problème qui est modifié dans o1 a et fn, mais il n'y a aucun changement dans o2 Puisque les tableaux et les fonctions sont à la fois des objets et des types référence, cela signifie que même si les propriétés et les méthodes sont dans o1. ont le même nom que les propriétés et méthodes dans o2, elles ne sont pas une référence, mais une copie des propriétés et méthodes définies par l'objet Obj.

Ce n'est pas un problème pour les attributs, mais c'est un gros problème pour les méthodes, car les méthodes font exactement la même fonction, mais il y a deux copies Si un objet fonction a S'il y a des milliers d'instances. méthodes, alors chaque instance doit conserver une copie de milliers de méthodes. Ce n'est évidemment pas scientifique. Que pouvons-nous faire ?

prototype

Chaque fois qu'une nouvelle fonction est créée, un attribut prototype sera créé pour la fonction selon un ensemble de règles spécifiques. Par défaut, l'attribut prototype obtiendra un constructeur par défaut. Attribut (Constructeur). Cet attribut est un pointeur vers la fonction où se trouve l'attribut prototype. C'est un peu déroutant. Écrivez le code et voyez l'image ci-dessus !

function Person(){

            }

Comme le montre la figure ci-dessus, l'objet Person obtiendra automatiquement l'attribut prototype, et le prototype est également un objet et obtiendra automatiquement un attribut constructeur, qui pointe vers l'objet Person.

Lorsqu'un constructeur est appelé pour créer une instance, l'instance contiendra un pointeur interne (dans de nombreux navigateurs ce pointeur est nommé __proto__) pointant vers le prototype du constructeur. Cette connexion existe entre le prototype de l'instance. et le constructeur entre l'instance et le constructeur.

function Person(name){
                this.name=name;
            }

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

L'instance Person person1 contient l'attribut name et génère automatiquement un attribut __proto__, qui pointe vers le prototype de Person. Vous pouvez accéder à la méthode printName définie dans le prototype, qui ressemble à ceci. 🎜>Écrivez un programme pour tester et voir si les attributs et les méthodes du prototype peuvent être partagés

Comme prévu ! En effet, lorsque le code lit un attribut d'un objet, il effectuera une recherche. La cible est un attribut portant un nom donné. La recherche démarre d'abord à partir de l'instance de l'objet. Si l'attribut est trouvé dans l'instance, il le sera. renvoyé. S'il n'est pas trouvé, il sera recherché dans le prototype, s'il n'est toujours pas trouvé, continuez à récurer l'objet prototype du prototype jusqu'à ce qu'il soit trouvé. Si l'objet n'est toujours pas trouvé après la récursion, une erreur sera renvoyée. . De la même manière, si une propriété ou une fonction portant le même nom que prototype est définie dans une instance, les propriétés ou fonctions de prototype seront écrasées.

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person('Byron');
            var person2=new Person('Frank');

            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //[1,2]

Construire des objets simples

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];
            var person=new Person('Byron');
            person.share=0;

            console.log(person.share); //0而不是prototype中的[]

Bien sûr, le prototype n'est pas spécifiquement défini pour résoudre les problèmes ci-dessus, mais il résout les problèmes ci-dessus. Après avoir compris ces connaissances, vous pouvez créer un objet scientifique avec une grande réutilisabilité. Si vous souhaitez les propriétés ou les fonctions de l'objet instance, définissez-les dans le prototype. Si vous souhaitez que chaque instance ait des propriétés ou des méthodes distinctes, définissez-les dans cette instanciation. les paramètres peuvent être transmis via le constructeur.

Pour plus d'articles liés à l'utilisation du prototype JavaScript, veuillez faire attention au site Web PHP chinois !

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }