Le prototype est la base de l'héritage en JavaScript. L'héritage JavaScript est un héritage basé sur un prototype. L'objet prototype d'une fonction est en JavaScript. Si nous créons une fonction A, alors le navigateur créera un objet B dans le fichier. mémoire. .
1. Qu'est-ce qu'un prototype
Le prototype est la base de l'héritage en Javascript L'héritage JavaScript est un héritage basé sur un prototype.
1.1 Objet prototype de fonction
En JavaScript, on crée une fonction A ( consiste à déclarer une fonction ), puis on parcourt Le processeur va créer un objet B en mémoire, et chaque fonction aura un attribut prototype pointant vers cet objet par défaut (ie : la valeur de l'attribut de prototype est cet objet ) . Cet objet B est l'objet prototype de la fonction A, appelé prototype de la fonction. Par défaut, cet objet prototype B aura un attribut constructeur pointant vers cette fonction A (ce qui veut dire : la valeur de l'attribut constructeur est la fonction A).
Regardez le code ci-dessous :
<body>
<script type="text/javascript">
/*
声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
有一个属性叫constructor 执行了这个函数
注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
*/
function Person () {
}
</script>
</body>
Copier après la connexion
Le diagramme ci-dessous décrit ce qui se passe après la déclaration d'une fonction :
1.2 Utiliser des constructeurs Créer un object
Lorsque vous utilisez une fonction comme constructeur (en théorie, n'importe quelle fonction peut être utilisée comme constructeur) pour créer un objet en utilisant new, alors l'objet aura un attribut invisible par défaut vers lequel pointer. à l'objet prototype du constructeur. Nous utilisons généralement [[prototype]] pour représenter cet attribut invisible, mais cet attribut n'est pas accessible directement.
Regardez le code ci-dessous :
<body>
<script type="text/javascript">
function Person () {
}
/*
利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
指向了构造函数的原型对象。
*/
var p1 = new Person();
</script>
</body>
Copier après la connexion
Observez le schéma ci-dessous :
Explication :
Comme vous pouvez le voir sur l'illustration ci-dessus, bien que le constructeur Person soit utilisé pour créer l'objet p1, une fois l'objet créé, l'objet p1 n'a en réalité rien à voir avec le constructeur Person p1. La propriété [[ prototype ]] de l'objet pointe vers l'objet prototype du constructeur Person.
Si vous utilisez new Person() pour créer plusieurs objets, plusieurs objets pointeront vers l'objet prototype du constructeur Person en même temps.
Nous pouvons ajouter manuellement des propriétés et des méthodes à cet objet prototype, puis p1, p2, p3... ces objets partageront les propriétés et méthodes ajoutées dans le prototype.
Si on accède à un nom d'attribut dans p1, s'il se trouve dans l'objet p1, il sera renvoyé directement. S'il n'est pas trouvé dans l'objet p1, recherchez directement dans l'objet prototype pointé par l'attribut [[prototype]] de l'objet p1, et revenez s'il est trouvé. (S'il n'est pas trouvé dans le prototype, continuez à rechercher la chaîne prototype-prototype du prototype. Nous en reparlerons plus tard).
Si un nom d'attribut est ajouté via l'objet p1, le nom d'attribut dans le prototype est bloqué pour l'objet p1. En d'autres termes : il n'y a aucun moyen d'accéder au nom de l'attribut du prototype dans p1.
Vous ne pouvez lire la valeur du nom de l'attribut dans le prototype que via l'objet p1, mais vous ne pouvez pas modifier la valeur du nom de l'attribut dans le prototype. p1.name = "李思"; Il ne modifie pas la valeur dans le prototype, mais ajoute un nom d'attribut à l'objet p1.
2. Plusieurs propriétés et méthodes liées aux prototypes
2.1 attribut prototype
le prototype existe dans le constructeur (en fait, il existe dans n'importe quelle fonction, mais on ne fait pas attention au prototype quand ce n'est pas un constructeur ), il montre l'objet prototype de ce constructeur.
Référez-vous au schéma précédent.
2.2 Attribut constructeur
L'attribut constructeur existe dans l'objet prototype, et il pointe vers la fonction constructeur
Regardez le code suivant :
<script type="text/javascript">
function Person () {
}
alert(Person.prototype.constructor === Person); // true
var p1 = new Person();
//使用instanceof 操作符可以判断一个对象的类型。
//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
alert(p1 instanceof Person); // true
</script>
Copier après la connexion
Nous pouvons spécifier un nouvel objet comme objet prototype de Person selon l'attribut Person.prototype.
Mais il y a un problème en ce moment. La propriété constructor du nouvel objet ne pointe plus vers le constructeur Person.
Regardez le code suivant :
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
Person.prototype = {
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.name); // 志玲
alert(p1 instanceof Person); // true
alert(Person.prototype.constructor === Person); //false
//如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
/*
Person.prototype = {
constructor : Person //让constructor重新指向Person函数
}
*/
</script>
Copier après la connexion
2.3 attribut __proto__ (note : il y a 2 traits de soulignement à gauche et à droite)
Créé à l'aide de la méthode constructeur Après la création d'un nouvel objet, il y aura par défaut un attribut inaccessible [[prototype]] dans cet objet, qui pointe vers l'objet prototype du constructeur.
Cependant, dans les navigateurs individuels, l'accès à cet attribut [[prototype]] est également fourni (navigateur Chrome et navigateur Firefox. Le navigateur IE ne le prend pas en charge). Méthode d'accès : p1.__proto__
Mais les développeurs devraient essayer de ne pas accéder de cette manière, car une opération imprudente modifiera la chaîne de prototypes d'héritage de cet objet.
<script type="text/javascript">
function Person () {
}
//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
Person.prototype = {
constructor : Person,
name:"志玲",
age:20
};
var p1 = new Person();
alert(p1.__proto__ === Person.prototype); //true
</script>
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
alert("sex" in p1); // 对象本身添加的，所以true
alert("name" in p1); //原型中存在，所以true
alert("age" in p1); //对象和原型中都不存在，所以false
</script>
Copier après la connexion
回到前面的问题，如果判断一个属性是否存在于原型中：
如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。
<script type="text/javascript">
function Person () {
}
Person.prototype.name = "志玲";
var p1 = new Person();
p1.sex = "女";
//定义一个函数去判断原型所在的位置
function propertyLocation(obj, prop){
if(!(prop in obj)){
alert(prop + "属性不存在");
}else if(obj.hasOwnProperty(prop)){
alert(prop + "属性存在于对象中");
}else {
alert(prop + "对象存在于原型中");
}
}
propertyLocation(p1, "age");
propertyLocation(p1, "name");
propertyLocation(p1, "sex");
</script
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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
