Ein tiefer Einblick in Neues und das in JavaScript: Die Leistungsfähigkeit der objektorientierten Programmierung erschließen

JavaScript ist eine leistungsstarke, flexible Sprache mit Wurzeln in der funktionalen Programmierung und Funktionen für die objektorientierte Programmierung (OOP). Zwei entscheidende Konzepte, die das Herzstück von OOP in JavaScript bilden, sind neu und das hier. Obwohl diese Schlüsselwörter einfach erscheinen mögen, weisen sie Nuancen auf, deren Beherrschung selbst für erfahrene Entwickler schwierig sein kann. In diesem Blog-Beitrag werden wir uns eingehend mit der Funktionsweise von New JavaScript befassen und deren Verhalten anhand von Beispielen und Best Practices aufschlüsseln.

---

Inhaltsverzeichnis

Einführung dazu in JavaScript

Im Kern handelt es sich dabei um ein kontextabhängiges Schlüsselwort, das sich auf das Objekt bezieht, von dem aus eine Funktion aufgerufen wird. Im Gegensatz zu einigen anderen Sprachen, in denen dies statisch gebunden ist, kann sich der Wert von this in JavaScript ändern, je nachdem, wie und wo eine Funktion aufgerufen wird.

In einfachen Worten:

• Globaler Geltungsbereich: Im globalen Kontext (oder im nicht-strikten Modus) bezieht sich dies auf das globale Objekt (Fenster in Browsern, global in Node.js).
• Innere Methoden: Innerhalb einer Objektmethode bezieht sich dies auf das Objekt, dem die Methode gehört.
• Ereignishandler: Bei Ereignis-Listenern bezieht sich dies normalerweise auf das Element, das das Ereignis ausgelöst hat.

Wir werden diese Zusammenhänge später im Blog anhand von Beispielen untersuchen.

---

Neues in JavaScript verstehen

Das Schlüsselwort new wird in JavaScript verwendet, um Instanzen von benutzerdefinierten Objekten oder integrierten Objekten wie Datum, Array usw. zu erstellen. Wenn Sie new mit einer Konstruktorfunktion verwenden, wird ein neues Objekt erstellt und dieses an dieses Objekt gebunden , im Wesentlichen eine Verknüpfung mit einem Prototyp.

Zum Beispiel:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

Wenn neu verwendet wird:

1. Ein neues leeres Objekt wird erstellt.
2. Das Schlüsselwort this im Konstruktor ist so eingestellt, dass es auf dieses neue Objekt verweist.
3. Die Funktion führt ihren Code aus und weist diesem Eigenschaften zu.
4. Das Objekt ist mit dem Prototyp des Konstruktors verknüpft, wodurch die Vererbung ermöglicht wird.
5. Die Funktion gibt dies zurück, es sei denn, ein Objekt wird explizit zurückgegeben.

---

Wie neu unter der Haube funktioniert

Simulieren wir das Verhalten von new mit einer benutzerdefinierten Funktion:

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

Diese Funktion folgt den gleichen Schritten wie das neue Schlüsselwort und demonstriert die Mechanismen hinter den Kulissen.

---

Beispiele hierfür in verschiedenen Kontexten

1. Globaler Kontext

Im globalen Kontext (nicht strikter Modus) bezieht sich dies auf das globale Objekt (Fenster in Browsern).

console.log(this === window); // true

function showThis() {
  console.log(this); // window
}

showThis();

Im strikten Modus („use strict“;) ist dies im globalen Kontext undefiniert:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

1. Objektmethodenkontext

Wenn dies innerhalb einer Objektmethode verwendet wird, bezieht es sich auf das Objekt, dem die Methode gehört.

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

Hier bezieht sich dies auf das Personenobjekt, da es der Kontext ist, in dem die Greet-Methode aufgerufen wird.

1. Konstruktor-Funktionskontext

In einer Konstruktorfunktion bezieht sich dies auf das neu erstellte Objekt.

console.log(this === window); // true

function showThis() {
  console.log(this); // window
}

showThis();

1. Ereignishandlerkontext In Event-Handlern bezieht sich dies auf das DOM-Element, das das Ereignis ausgelöst hat.

"use strict";

function showThis() {
  console.log(this); // undefined
}

showThis();

Bei der Verwendung von Pfeilfunktionen in Ereignis-Listenern ist dies lexikalisch gebunden und bezieht sich nicht auf das Element:

const person = {
  name: "Alice",
  greet() {
    console.log(this.name); // 'Alice'
  },
};

person.greet();

---

Best Practices und häufige Fallstricke

1. Pfeilfunktionen und dies: Pfeilfunktionen binden ihr eigenes Dies nicht; Stattdessen erben sie dies vom umgebenden lexikalischen Kontext. Dies kann in Situationen wie Ereignishandlern oder Rückrufen nützlich sein, in denen Sie einen Verweis auf den übergeordneten Bereich beibehalten möchten.

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

const dog = new Animal("Dog");
console.log(dog.type); // Dog

1. Explizite Bindung mit .call(), .apply() und .bind(): Mit diesen Methoden können Sie den Wert manuell steuern. Zum Beispiel:

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this); // the button element
});

1. Vermeiden Sie dies in globalen Funktionen: Es empfiehlt sich im Allgemeinen, dies in globalen Funktionen zu vermeiden, da es zu unerwartetem Verhalten führen kann, insbesondere im strikten Modus.

2. Klassensyntax: Seit ES6 bietet die Verwendung der Klassensyntax eine intuitivere Möglichkeit, Konstruktorfunktionen mit this und new zu definieren.
   

button.addEventListener("click", () => {
  console.log(this); // refers to the outer scope (e.g., window)
});

---

Abschluss

Die Schlüsselwörter new und this spielen eine zentrale Rolle im objektorientierten Paradigma von JavaScript und ermöglichen die Erstellung und Verwaltung von Objekten und deren Verhalten. Um robusten, skalierbaren JavaScript-Code zu schreiben, ist es wichtig zu verstehen, wie dies in verschiedenen Kontexten funktioniert und wie neue Instanzen von Objekten erstellt werden. Wenn Sie diese Konzepte beherrschen, können Sie häufige Fallstricke vermeiden und saubereren, wartbareren Code schreiben.

Experimentieren Sie weiter und schreiben Sie Beispiele, um Ihr Verständnis dieser zentralen JavaScript-Konzepte zu festigen!

---

Hat Ihnen die Lektüre gefallen? Wenn Sie diesen Artikel aufschlussreich oder hilfreich fanden, sollten Sie darüber nachdenken, meine Arbeit zu unterstützen, indem Sie mir einen Kaffee spendieren. Ihr Beitrag trägt dazu bei, dass mehr Inhalte wie dieser entstehen. Klicken Sie hier, um mir einen virtuellen Kaffee zu gönnen. Prost!

Das obige ist der detaillierte Inhalt vonEin tiefer Einblick in Neues und das in JavaScript: Die Leistungsfähigkeit der objektorientierten Programmierung erschließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!