Une plongée approfondie dans la nouveauté et cela en JavaScript : libérer la puissance de la programmation orientée objet

JavaScript est un langage puissant et flexible avec des racines dans la programmation fonctionnelle et des capacités de programmation orientée objet (POO). Deux concepts critiques qui sont au cœur de la POO en JavaScript sont nouveaux et ceci. Bien que ces mots-clés puissent sembler simples, ils comportent des nuances qui peuvent être difficiles à maîtriser, même pour les développeurs expérimentés. Dans cet article de blog, nous allons approfondir le fonctionnement des nouveaux et ce en JavaScript, en décomposant leurs comportements avec des exemples et des bonnes pratiques.

Table des matières

Introduction à ceci en JavaScript

À la base, il s'agit d'un mot-clé dépendant du contexte qui fait référence à l'objet à partir duquel une fonction est appelée. Contrairement à d'autres langages où ceci est lié statiquement, en JavaScript, la valeur de this peut changer en fonction de la manière et de l'endroit où une fonction est invoquée.

En termes simples :

• Global Scope : Dans le contexte global (ou mode non strict), cela fait référence à l'objet global (fenêtre dans les navigateurs, global dans Node.js).
• Inside Methods : Dans une méthode objet, cela fait référence à l'objet qui possède la méthode.
• Gestionnaires d'événements : dans les écouteurs d'événements, cela fait généralement référence à l'élément qui a déclenché l'événement.

Nous explorerons ces contextes avec des exemples plus loin dans le blog.

Comprendre le nouveau en JavaScript

Le mot-clé new en JavaScript est utilisé pour créer des instances d'objets définis par l'utilisateur ou des objets intégrés comme Date, Array, etc. Lorsque vous utilisez new avec une fonction constructeur, il crée un nouvel objet et le lie à cet objet. , en le liant essentiellement à un prototype.

Par exemple :

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' }

Lorsque le nouveau est utilisé :

1. Un nouvel objet vide est créé.
2. Le mot-clé this à l'intérieur du constructeur est défini pour référencer ce nouvel objet.
3. La fonction exécute son code et lui attribue des propriétés.
4. L'objet est lié au prototype du constructeur, permettant l'héritage.
5. La fonction renvoie ceci sauf si un objet est renvoyé explicitement.

Comment fonctionne le nouveau sous le capot

Simulons le comportement de new à l'aide d'une fonction personnalisée :

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

Cette fonction suit les mêmes étapes que le nouveau mot-clé, démontrant les mécanismes en coulisses.

Exemples de cela dans divers contextes

1. Contexte mondial

Dans le contexte global (mode non strict), cela fait référence à l'objet global (fenêtre dans les navigateurs).

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

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

showThis();

En mode strict (« use strict » ;), ceci n'est pas défini dans le contexte global :

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. Contexte de la méthode objet

Lorsque ceci est utilisé dans une méthode objet, il fait référence à l'objet qui possède la méthode.

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

Ici, cela fait référence à l'objet personne car c'est le contexte dans lequel la méthode greet est appelée.

1. Contexte de la fonction constructeur

Dans une fonction constructeur, ceci fait référence à l'objet nouvellement créé.

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

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

showThis();

1. Contexte du gestionnaire d'événements Dans les gestionnaires d'événements, cela fait référence à l'élément DOM qui a déclenché l'événement.

"use strict";

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

showThis();

Lors de l'utilisation de fonctions fléchées dans les écouteurs d'événements, ceci est lié lexicalement et ne fait pas référence à l'élément :

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

person.greet();

Meilleures pratiques et pièges courants

1. Fonctions fléchées et ceci : Les fonctions fléchées ne lient pas leur propre ceci ; au lieu de cela, ils héritent de cela du contexte lexical environnant. Cela peut être utile dans des situations telles que les gestionnaires d'événements ou les rappels où vous souhaitez conserver une référence à la portée parent.

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

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

1. Liaison explicite avec .call(), .apply() et .bind() : vous pouvez contrôler manuellement la valeur de ceci à l'aide de ces méthodes. Par exemple:

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

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

1. Évitez d'utiliser ceci dans les fonctions globales : C'est généralement une bonne pratique d'éviter cela dans les fonctions globales, car cela peut conduire à des comportements inattendus, notamment en mode strict.

2. Syntaxe de classe : Depuis ES6, l'utilisation de la syntaxe de classe offre un moyen plus intuitif de définir des fonctions de constructeur avec this et new.
   

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

Conclusion

Les mots-clés new et this jouent un rôle central dans le paradigme orienté objet de JavaScript, permettant la création et la gestion d'objets et de leur comportement. Comprendre comment cela fonctionne dans différents contextes et comment les nouvelles constructions d'instances d'objets est crucial pour écrire du code JavaScript robuste et évolutif. En maîtrisant ces concepts, vous pouvez éviter les pièges courants et écrire un code plus propre et plus maintenable.

Continuez à expérimenter et à écrire des exemples pour consolider votre compréhension de ces concepts JavaScript fondamentaux !

Vous avez apprécié la lecture ? Si vous avez trouvé cet article perspicace ou utile, envisagez de soutenir mon travail en m'offrant un café. Votre contribution contribue à alimenter davantage de contenu comme celui-ci. Cliquez ici pour m'offrir un café virtuel. Bravo !

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!