Heim Web-Frontend js-Tutorial Die JavaScript-Prototypenkette in einfachen Worten verstehen_Javascript-Kenntnisse

Die JavaScript-Prototypenkette in einfachen Worten verstehen_Javascript-Kenntnisse

May 16, 2016 pm 04:00 PM
javascript 原型链

Das Beispiel in diesem Artikel beschreibt die Prototypkette von JavaScript. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Früher dachte ich, es sei eine sehr tiefgründige Sache, und nachdem ich heute einige Einführungen gelesen hatte, fand ich dieses Bild, was bedeutet, dass keine Sprache es klarer erklären kann als dieses Bild.

Nachdem ich mir dieses Bild angesehen habe, habe ich plötzlich ein qualitatives Verständnis von Javascript.

Es gibt zwei Arten von JavaScript-Prototypketten: explizit und implizit:

Explizite Prototypenkette: ist unser gemeinsamer Prototyp

Implizite Prototypenkette: Sie ist unter normalen Umständen nicht zugänglich, also unsichtbar. Sie kann über __proto__ unter FireFox aufgerufen werden; die implizite Prototypenkette wird verwendet, um innerhalb der Javascript-Engine zu suchen ., eingestellt durch Anzeige der Prototypenkette;

1. Das Konzept von Prototyp und __proto__

Prototyp ist ein Attribut der Funktion (jede Funktion verfügt über ein Prototypattribut). Dieses Attribut ist ein Zeiger, der auf ein Objekt zeigt. Es handelt sich um eine Eigenschaft, die den Prototyp des geänderten Objekts anzeigt.

__proto__ ist ein integriertes Attribut, das einem Objekt gehört (bitte beachten Sie: Prototyp ist ein integriertes Attribut einer Funktion und __proto__ ist ein integriertes Attribut eines Objekts. Es handelt sich um ein intern von JS verwendetes Attribut). um die Prototypenkette zu finden.

Sowohl Chrome als auch FF können auf das __proto__-Attribut des Objekts zugreifen, IE jedoch nicht.

2. Der neue Prozess

var Person = function(){};
var p = new Person();
Nach dem Login kopieren
Der neue Prozess gliedert sich in die folgenden drei Schritte:

(1) var p={}; Mit anderen Worten, initialisieren Sie ein Objekt p

(2) p.__proto__ = Person.prototype;
(3) Person.call(p); das heißt, p wird konstruiert, was auch als Initialisierung p
bezeichnet werden kann

Der Schlüssel liegt im zweiten Schritt, beweisen wir es:

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);
Nach dem Login kopieren
Dieser Code gibt true zurück. Dies zeigt, dass Schritt 2 richtig ist.

3. Beispiel

var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();
Nach dem Login kopieren
p ist ein Objekt, das auf Person verweist. Wir haben eine sayName-Methode und ein Altersattribut für den Prototyp von Person definiert. Wenn wir p.age ausführen, suchen wir zuerst darin (d. h. im Konstruktor). Wenn es nicht gefunden wird, verfolgen wir es entlang des Prototyps Kette.

Wie funktioniert der Aufwärts-Traceback hier nach oben? Hier müssen wir das Attribut __proto__ verwenden, um für die Suche eine Verknüpfung zum Prototyp (also Person.prototype) herzustellen. Endlich wurde das Altersattribut auf dem Prototyp gefunden.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

So verwenden Sie insertBefore in Javascript

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript

See all articles