JavaScript - Native Prototypes

Willkommen, ambitionierte Programmierer! Heute tauchen wir in die faszinierende Welt der JavaScript-Native Prototypen ein. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie auf dieser Reise Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Lassen Sie uns gemeinsam dieses Abenteuer beginnen!

Native Prototypen

Stellen Sie sich vor, Sie sind in einer magischen Bibliothek, in der jedes Buch besondere Kräfte hat. In JavaScript sind diese "magischen Bücher" unsere nativen Objekte, und ihre "besonderen Kräfte" sind die Methoden und Eigenschaften, die sie von Haus aus besitzen. Das sind die Native Prototypen.

Was sind Native Prototypen?

Native Prototypen sind die eingebauten Prototypen für standardisierte JavaScript-Objekte wie Array, String, Number und Object. Sie bieten eine Reihe von Methoden, die alle Instanzen dieser Objekte verwenden können.

Sehen wir uns ein Beispiel an:

let myString = "Hello, World!";
console.log(myString.toUpperCase());

Ausgabe:

HELLO, WORLD!

In diesem Beispiel ist toUpperCase() eine Methode, die vom String-Prototyp bereitgestellt wird. Obwohl wir diese Methode nicht selbst definiert haben, können wir sie auf jede von uns erstellte Zeichenkette anwenden. Es ist, als käme jede von uns gemachte Zeichenkette mit einer eingebauten Werkzeugkiste voller nützlicher Methoden!

Erforschung der Native Prototypen

Lassen Sie uns einige weitere native Prototypenmethoden erkunden:

// Array-Prototypenmethoden
let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);  // 3
console.log(fruits.join(", "));  // "apple, banana, cherry"

// Number-Prototypenmethoden
let num = 3.14159;
console.log(num.toFixed(2));  // "3.14"

// Object-Prototypenmethoden
let person = { name: "Alice", age: 30 };
console.log(Object.keys(person));  // ["name", "age"]

Jede dieser Methoden (length, join, toFixed, keys) stammt vom jeweiligen nativen Prototyp. Sie sind wie Schweizer Army-Messer – immer dann da, wenn Sie sie brauchen!

Aktualisierung des Native Prototypen

Was ist, wenn wir unseren eigenen "besonderen Kräften" zu diesen magischen Büchern hinzufügen möchten? Das können wir tun, indem wir den nativen Prototyp aktualisieren. Aber denken Sie daran, mit großer Macht kommt große Verantwortung!

Hinzufügen einer Methode zum Native Prototyp

Lassen Sie uns eine neue Methode zum String-Prototyp hinzufügen:

String.prototype.greet = function() {
return `Hello, ${this}!`;
};

let name = "Alice";
console.log(name.greet());  // "Hello, Alice!"

Hier haben wir eine greet-Methode zu allen Zeichenketten hinzugefügt. Es ist, als hätte jede Zeichenkette in unserem Programm die Fähigkeit,Hallo zu sagen!

Die Gefahren der Änderung von Native Prototypen

While dies cool erscheinen mag, das Ändern von nativen Prototypen kann riskant sein. Es ist wie das Ändern der Regeln eines Spiels, während alle spielen – es kann zu Verwirrung und unerwartetem Verhalten führen. In professionellen Umgebungen wird generell davon abgeraten, native Prototypen zu ändern.

Hinzufügen einer Methode zur Konstruktorenfunktion

Eine sicherere Alternative ist das Hinzufügen von Methoden zu Ihren eigenen Konstruktorenfunktionen. Lassen Sie uns einen Person-Konstruktor erstellen:

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

Person.prototype.sayHello = function() {
return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
};

let alice = new Person("Alice", 30);
console.log(alice.sayHello());  // "Hello, my name is Alice and I'm 30 years old."

Auf diese Weise fügen wir neue Fähigkeiten zu unseren eigenen "magischen Büchern" hinzu, ohne die ursprüngliche Sammlung der Bibliothek zu durcheinanderzubringen.

JavaScript-Prototypenketten

Nun lassen Sie uns über Prototypenketten sprechen. Stellen Sie sich einen Stammbaum vor, bei dem Kinder Eigenschaften von ihren Eltern erben. In JavaScript können Objekte Eigenschaften und Methoden von anderen Objekten über Prototypenketten erben.

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

Animal.prototype.makeSound = function() {
return "Some generic animal sound";
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
return "Woof!";
};

let myDog = new Dog("Buddy");
console.log(myDog.name);  // "Buddy"
console.log(myDog.makeSound());  // "Some generic animal sound"
console.log(myDog.bark());  // "Woof!"

In diesem Beispiel erbt Dog von Animal. Es ist, als ob alle Hunde Tiere sind, aber nicht alle Tiere Hunde sind. Die Dog-Prototypenkette sieht so aus: myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null.

Zusammenfassung der Native Prototypenmethoden

Hier ist eine Tabelle mit einigen commonly verwendeten nativen Prototypenmethoden:

Objekttyp	Methode	Beschreibung
Array	push()	Fügt eine oder mehrere Elemente an das Ende eines Arrays hinzu
Array	pop()	Entfernt das letzte Element aus einem Array
Array	slice()	Gibt eine flache Kopie eines Teils eines Arrays zurück
String	toLowerCase()	Konvertiert eine Zeichenkette in Kleinbuchstaben
String	trim()	Entfernt Leerzeichen von beiden Enden einer Zeichenkette
Number	toFixed()	Formatiert eine Zahl mit festen Dezimalstellen
Object	hasOwnProperty()	Gibt einen Boolean-Wert zurück, der angibt, ob ein Objekt eine bestimmte Eigenschaft besitzt

Denken Sie daran, das sind nur einige Beispiele. Jeder native Objekttyp bringt viele weitere nützliche Methoden mit, die Sie auf Ihrer JavaScript-Reise erkunden und verwenden können!

Zusammenfassend sind native Prototypen die Bausteine von JavaScript-Objekten. Das Verständnis dieser ist wie das Öffnen eines Schatzes voller leistungsstarker Werkzeuge, die Ihren Code effizienter und ausdrucksstärker machen können. Während Sie Ihre Programmierreise fortsetzen, werden Sie diese Werkzeuge immer öfter zu greifen. Viel Spaß beim Coden und denken Sie daran – in der Welt von JavaScript sind Sie immer nur ein Prototyp von etwas Unglaublichem entfernt!

Credits: Image by storyset