Comprendre l'héritage prototypique de JavaScript - Un guide du développeur

Salut amis développeurs ! Après des années de travail avec l'héritage basé sur les classes de PHP, plonger dans l'héritage prototypique de JavaScript m'a donné l'impression d'apprendre à écrire avec ma main gauche. Aujourd'hui, je souhaite partager ce que j'ai appris sur cette approche unique de l'héritage qui rend JavaScript spécial.

Les bases – Qu’est-ce qui le rend différent ?

Contrairement à PHP ou Java où l'on travaille avec des classes, JavaScript utilise des prototypes. Chaque objet en JavaScript possède un lien interne vers un autre objet appelé son « prototype ». Considérez-le comme un mécanisme de secours : lorsque vous essayez d'accéder à une propriété qui n'existe pas dans un objet, JavaScript la recherche dans le prototype de l'objet.

const pet = {
  makeSound() {
    return "Some generic sound";
  }
};

const cat = {
  purr() {
    return "Purrrr";
  }
};

// Set pet as the prototype of cat
Object.setPrototypeOf(cat, pet);

// Now cat can use methods from pet
console.log(cat.makeSound()); // "Some generic sound"
console.log(cat.purr());      // "Purrrr"

La chaîne Proto - Elle va plus loin

C'est ici que ça devient intéressant. Les prototypes peuvent avoir leurs propres prototypes, formant ce que nous appelons la « chaîne de prototypes ». JavaScript continuera à rechercher cette chaîne jusqu'à ce qu'il trouve ce dont il a besoin ou qu'il atteigne un prototype nul.

const animal = {
  eat() {
    return "Nom nom nom";
  }
};

const pet = {
  makeSound() {
    return "Some generic sound";
  }
};

const cat = {
  purr() {
    return "Purrrr";
  }
};

Object.setPrototypeOf(pet, animal);
Object.setPrototypeOf(cat, pet);

// cat can now access methods from both pet and animal
console.log(cat.purr());      // "Purrrr"
console.log(cat.makeSound()); // "Some generic sound"
console.log(cat.eat());       // "Nom nom nom"

Le modèle de constructeur - Une approche plus familière

Si vous utilisez un langage basé sur des classes comme PHP, vous trouverez peut-être le modèle de constructeur plus familier :

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

Animal.prototype.eat = function() {
  return `${this.name} is eating`;
};

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

// Set up inheritance
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.purr = function() {
  return `${this.name} says purrrr`;
};

const felix = new Cat("Felix");
console.log(felix.eat());  // "Felix is eating"
console.log(felix.purr()); // "Felix says purrrr"

JavaScript moderne – Classes sous le capot

ES6 a introduit la syntaxe de classe, qui peut sembler familière aux développeurs PHP. Mais ne vous y trompez pas : ce n'est qu'une question de sucre syntaxique plutôt que d'héritage prototypique :

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    return `${this.name} is eating`;
  }
}

class Cat extends Animal {
  purr() {
    return `${this.name} says purrrr`;
  }
}

const felix = new Cat("Felix");

Conseils de pro des tranchées

Après des années de travail avec PHP et JavaScript, voici quelques conseils que j'ai appris :

1. Préférez la composition à l'héritage lorsque cela est possible
2. Gardez les chaînes de prototype peu profondes : les chaînes profondes peuvent nuire aux performances
3. Utilisez la syntaxe de classe pour un code plus propre, mais comprenez les prototypes pour le débogage
4. Toujours définir la propriété constructeur lors de la création manuelle de chaînes d'héritage

Conclusion

Comprendre l'héritage prototypique peut sembler étrange au début, surtout si vous venez de PHP ou Java. Mais une fois le clic cliqué, vous apprécierez sa flexibilité et sa puissance. C'est l'une de ces fonctionnalités JavaScript qui vous fait penser différemment à la programmation orientée objet.

Avez-vous rencontré des défis intéressants avec l'héritage JavaScript ? Déposez un commentaire ci-dessous – j’aimerais entendre vos histoires !

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!