Explication détaillée de l'utilisation du prototype en JavaScript

Je crois que de nombreux amis qui ont utilisé JavaScript doivent avoir une certaine compréhension du prototype, mais qu'est-ce qu'un prototype exactement rend les débutants perplexes. Ils savent seulement que les fonctions ont un attribut de prototype et que des fonctions peuvent y être ajoutées, par exemple. accès, je ne connais pas les autres. Aujourd'hui je vais vous présenter l'utilisation détaillée du prototype en 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 que des fonctions peuvent être ajoutées, par exemple, pour y accéder. bien sûr, j'ai récemment lu de la programmation JavaScript avancée et j'ai finalement dévoilé son mystère.

Chaque fonction possède 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, c'est-à-dire utilisant la fonction comme. Lorsque le constructeur est appelé (appelé à l'aide de l'opérateur new), l'objet nouvellement créé héritera des propriétés et méthodes de l'objet prototype.

Variables et fonctions privées

Permettez-moi de parler de quelques choses connexes avant de parler du prototype en détail, afin que vous puissiez mieux comprendre l'intention de conception du prototype. Un article JavaScript Namespace que j'ai écrit auparavant mentionnait la Portée de la fonction 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 depuis le. à l'extérieur, c'est-à-dire devenir des variables privées et des fonctions privées.

Le code est le suivant :

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 la fonction Obj L'instance de

ne peut toujours pas accéder à ces variables et fonctions. Le code est le suivant :

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

variables statiques, fonctions Les attributs et. les fonctions ajoutées par "." après avoir défini une fonction sont toujours accessibles via l'objet lui-même, mais ses instances ne sont pas accessibles respectivement. Ces variables et fonctions sont appelées variables statiques et fonctions statiques. Les étudiants qui ont utilisé Java et C# comprennent respectivement. la signification de statique très bien.

Le code est le suivant :

Variables d'instance, fonctions

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

En orienté objet programmation à l'exception de certaines fonctions de la bibliothèque, nous espérons toujours définir certaines propriétés et méthodes en même temps que l'objet est défini, accessibles après instanciation. JavaScript peut également le faire

Le code est le suivant. :

Cela peut être réalisé Dans le but ci-dessus, le code

est le suivant :

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

Les résultats d'exécution du code ci-dessus sont entièrement conformes à attentes, mais cela illustre également un problème. a et fn sont modifiés dans o1, mais dans o2 Il n'y a aucun changement. 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 dans o1 ont les mêmes name comme les propriétés et les méthodes dans o2, elles ne sont pas une référence, mais les propriétés et les méthodes définies pour 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 ?

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

prototype

Chaque fois qu'une nouvelle fonction est créée, un attribut de prototype est créé pour cette fonction en fonction d'un ensemble de règles spécifiques. Par défaut, prototype L'attribut sera obtenu. un attribut constructeur par défaut. 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'Explication détaillée de lutilisation du prototype en JavaScript ci-dessus ! Le code est le suivant :

function Person(){
            }

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

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

Le code est le suivant :

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 de personne person1 contient l'attribut name, et un attribut proto est automatiquement généré, qui pointe vers l'attribut Person. prototype , vous pouvez accéder à la méthode printName définie dans le prototype, qui ressemble probablement à ceci

写段程序测试一下看看prototype内属性、方法是能够共享

代码如下:

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]

果不其然！实际上当代码读取某个对象的某个属性的时候，都会执行一遍搜索，目标是具有给定名字的属性，搜索首先从对象实例开始，如果在实例中找到该属性则返回，如果没有则查找prototype，如果还是没有找到则继续递归prototype的prototype对象，直到找到为止，如果递归到object仍然没有则返回错误。同样道理如果在实例中定义如prototype同名的属性或函数，则会覆盖prototype的属性或函数。

代码如下:

function Person(name){                
this.name=name;            
}            
Person.prototype.share=[];
var person=new Person('Byron');            
person.share=0;            
console.log(person.share); //0而不是prototype中的[]

构造简单对象

当然prototype不是专门为解决上面问题而定义的，但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象，如果希望实例对象的属性或函数则定义到prototype中，如果希望每个实例单独拥有的属性或方法则定义到this中，可以通过构造函数传递实例化参数。

代码如下:

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

总结：

相信通过对本文的详细学习，很多小伙伴都知道JavaScript中prototype的使用有了进一步的了解，希望对你的工作有所帮助！

相关推荐：

JavaScript向对象添加属性和方法的属性prototype

Js如何使用prototype实现自定义数组的案例

JavaScript原型链prototype属性和方法实例详解

详细介绍javascript使用prototype实现OOP继承的方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!