Que sont le prototype js et la cha?ne de prototypes
Jun 14, 2023 am 11:34 AM
js原型和原型鏈?zhǔn)牵?、原型，所有的函數(shù)默認(rèn)都有一個“prototype”這樣公有且不可枚舉的屬性，它會指向另一個對象，這個對象就是原型。2、原型鏈，當(dāng)訪問對象的屬性或方法時，首先對象會從自身去找，找不到就會往原型中去找，也就是它構(gòu)造函數(shù)的“prototype”中，如果原型中找不到，即構(gòu)造函數(shù)中也沒有該屬性，就會往原型后面的原型上去找，這樣就形成了鏈?zhǔn)降慕Y(jié)構(gòu)，稱為原型鏈。
本教程操作系統(tǒng)：windows10系統(tǒng)、JavaScript? ECMAScript 2021版本、DELL G3電腦。
一、原型
原型：所有的函數(shù)默認(rèn)都有一個“prototype”這樣公有且不可枚舉的屬性，它會指向另一個對象，這個對象就是原型。每當(dāng)定義一個對象（函數(shù)也是對象）時，就會生成一個__proto__屬性，被稱為隱式原型；這個__proto__屬性指向的是這個對象的構(gòu)造函數(shù)的prototype，被稱為顯式原型。每一個對象都會從原型中“繼承”屬性。
首先看一個例子，創(chuàng)建一個Student類，并創(chuàng)建類的實例對象student：
class Student{
constructor(name, score) {
this.name = name;
this.score = score;
}
introduce() {
console.log(`我是${this.name}，考了${this.score}分。`)
}
}
const student = new Student('張三', 99)
console.log('student', student); // student Student { name: '張三', score: 99}
student.introduce(); // 我是張三，考了99分。控制臺能訪問到屬性和方法。
但是直接在控制臺輸入student，會發(fā)現(xiàn)只有name和score屬性，沒有introduce方法，但是有一個[[Prototype]]屬性，用兩個中括號括起來。
把[[Prototype]]展開，會發(fā)現(xiàn)introduce方法在[[Prototype]]中。
[[Prototype]]屬性被稱為student對象的隱式原型。當(dāng)我們要去找一個對象的屬性或者方法時，如果在當(dāng)前對象上找不到，就會去當(dāng)前對象的隱式原型[[Prototype]]屬性上去找。
可通過.__proto__屬性訪問原型，注意__proto__兩邊分別有兩條下劃線。
而Student()構(gòu)造函數(shù)也有一個prototype屬性，Student()構(gòu)造函數(shù)的prototype屬性實際上就等于student對象的__proto__屬性。
下面用一張圖來說明：
因此，構(gòu)造函數(shù)的prototype屬性就等于實例對象的__proto__屬性，構(gòu)造函數(shù)的prototype屬性被稱為顯式原型，實例對象的__proto__屬性被稱為隱式原型。
二、原型鏈
原型鏈：當(dāng)訪問一個對象的屬性或方法時，首先對象會從自身去找，如果找不到，就會往原型中去找，即__proto__，也就是它構(gòu)造函數(shù)的prototype中；如果原型中找不到，即構(gòu)造函數(shù)中也沒有該屬性，因為構(gòu)造函數(shù)也是對象，也有__proto__，就會往原型上去找，這樣就形成了鏈?zhǔn)降慕Y(jié)構(gòu)，稱為原型鏈，本質(zhì)描述的是對象的一種繼承關(guān)系。
再來看一個例子，創(chuàng)建一個Person類，再創(chuàng)建一個Teacher類繼承自Person類，并創(chuàng)建實例對象teacher：
class Person {
constructor(name) {
this.name = name;
}
drink(){
console.log('喝水');
}
}
class Teacher extends Person {
constructor(name, subject) {
super(name);
this.subject = subject;
}
teach() {
console.log(`我是${this.name}， 教${this.subject}。`)
}
}
const teacher = new Teacher('哈默', '前端開發(fā)')
console.log('teacher', teacher);
teacher.teach();
teacher.drink();控制臺輸出如下，teacher可以執(zhí)行teach()和drink()方法。
展開teacher對象，發(fā)現(xiàn)找不到這兩個方法，于是去找對象的原型，即__proto__屬性，找到teach()方法，再展開下一層__proto__屬性，找到drink()方法。
下面用一張圖說明：
可以看到，teacher實例對象本身是沒有teach()方法的，這時就會去teacher對象的__proto__隱式原型指向的Teacher.prototype顯式原型上去找，此時找到了teach()方法并執(zhí)行；同時，Teacher.prototype上仍然沒有找到drink()方法，而Teacher.prototype也是一個對象，有自己的__proto__隱式原型，那么就去Teacher.prototype.__proto__上去找，Teacher.prototype.__proto__會指向Person()構(gòu)造函數(shù)的顯式原型Person.prototype，此時找到了drink()方法并執(zhí)行，這就是原型鏈。
注：
（1）通過__proto__形成原型鏈而非protrotype。
（2）__proto__屬性是對象所獨有的。
（3）prototype屬性是函數(shù)所獨有的。但是由于JS中函數(shù)也是一種對象，所以函數(shù)也擁有__proto__屬性。
三、判斷對象自身是否有某屬性或方法
hasOwnProperty()方法會返回一個布爾值，用于判斷對象自身是否有某屬性或方法。返回true，代表是該對象自身的屬性或方法；返回false，代表是該對象原型上的屬性或方法。
由于Person類繼承自O(shè)bject類，那么執(zhí)行teacher.hasOwnProperty()方法時，實際會找到Object.prototype中的hasOwnProperty()方法并執(zhí)行。
因此，所有繼承了Object的對象都會繼承到hasOwnProperty方法。
同時可以看到，Object.prototype.__proto__ 的值為 null ，即 Object.prototype 沒有原型，所以可以想象在原型鏈中，當(dāng)找到頂層原型還沒有屬性時，那就是沒有這個屬性，返回返回undefined。
instanceof 運算符：用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上。
看一個例子，使用typeof判斷array的數(shù)據(jù)類型時，返回的是object，因此無法使用typeof判斷array的類型。
const object = {};
const array = [];
// 使用typeof判斷數(shù)據(jù)類型，array返回的是object
console.log(typeof object); // object
console.log(typeof array); // object下面使用instanceof運算符判斷array的數(shù)據(jù)類型：
// 使用instanceof判斷數(shù)據(jù)類型 const flagObject = object instanceof Array; const flagArray = array instanceof Array; console.log(flagObject); // false console.log(flagArray); // true
object instanceof Array返回false，表示Array.prototype不在object的原型鏈上；array instanceof Array返回true，表示Array.prototype在array的原型鏈上，由此可以區(qū)分object和array的數(shù)據(jù)類型。
也可通過控制臺查看object和array的原型。
注：[] instanceof Object 為 true
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
WebSocket et JavaScript : technologies clés pour mettre en ?uvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en ?uvre en détail. 1. Technologie WebSocket
Comment mettre en ?uvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 pm 02:54 PM
Comment utiliser WebSocket et JavaScript pour mettre en ?uvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.
JavaScript et WebSocket?: créer un système efficace de prévisions météorologiques en temps réel
Dec 17, 2023 pm 05:13 PM
JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. à mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en ?uvre à travers des exemples de code spécifiques. Nous
Tutoriel JavaScript simple?:?Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
Comment obtenir facilement le code d'état HTTP en JavaScript
Jan 05, 2024 pm 01:37 PM
Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service
JavaScript et WebSockets?: création de visualisations de données hautes performances en temps réel
Dec 17, 2023 pm 04:38 PM
JavaScript et WebSocket?: créer une visualisation de données en temps réel haute performance Avec le développement rapide d'Internet, la visualisation de données en temps réel devient de plus en plus importante dans de nombreux domaines. Qu'il s'agisse de transactions financières, de logistique et de transport, ou de surveillance industrielle et autres domaines, la visualisation de données en temps réel peut nous aider à mieux comprendre et analyser les données et à prendre des décisions plus éclairées. Dans le développement Web, les technologies JavaScript et WebSocket sont combinées pour obtenir une visualisation de données en temps réel haute performance. W
JavaScript et WebSocket?: créer un moteur de recherche en temps réel efficace
Dec 17, 2023 pm 10:13 PM
JavaScript et WebSocket : Construire un moteur de recherche en temps réel efficace Introduction : Avec le développement d'Internet, les utilisateurs ont des exigences de plus en plus élevées en matière de moteurs de recherche en temps réel. Lors d'une recherche avec les moteurs de recherche traditionnels, les utilisateurs doivent cliquer sur le bouton de recherche pour obtenir des résultats. Cette méthode ne peut pas répondre aux besoins des utilisateurs en matière de résultats de recherche en temps réel. Par conséquent, l’utilisation des technologies JavaScript et WebSocket pour mettre en ?uvre des moteurs de recherche en temps réel est devenue un sujet br?lant. Cet article présentera en détail l'utilisation de JavaScript
Comment mettre en ?uvre un système de signature électronique en ligne à l'aide de WebSocket et JavaScript
Dec 18, 2023 pm 03:09 PM
Présentation de l'utilisation de WebSocket et de JavaScript pour mettre en ?uvre un système de signature électronique en ligne : Avec l'avènement de l'ère numérique, les signatures électroniques sont largement utilisées dans divers secteurs pour remplacer les signatures papier traditionnelles. En tant que protocole de communication full-duplex, WebSocket peut effectuer une transmission de données bidirectionnelle en temps réel avec le serveur. En combinaison avec JavaScript, un système de signature électronique en ligne peut être mis en ?uvre. Cet article expliquera comment utiliser WebSocket et JavaScript pour développer un outil en ligne simple.