了解 JavaScript 的原型继承 - 开发指南

开发者们大家好！在使用 PHP 基于类的继承多年之后，深入研究 JavaScript 的原型继承感觉就像学习用我的左手写字一样。今天，我想分享我所学到的关于这种独特的继承方法的知识，这种方法使 JavaScript 变得特别。

基础知识 - 有何不同？

与使用类的 PHP 或 Java 不同，JavaScript 使用原型。 JavaScript 中的每个对象都有一个到另一个对象的内部链接，称为“原型”。将其视为一种后备机制 - 当您尝试访问对象中不存在的属性时，JavaScript 会在对象的原型中查找它。

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"

原链——更深入

这就是有趣的地方。原型可以有自己的原型，形成我们所说的“原型链”。 JavaScript 将继续查找该链，直到找到所需内容或找到空原型。

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"

构造函数模式 - 一种更熟悉的方法

如果您来自 PHP 等基于类的语言，您可能会发现构造函数模式更熟悉：

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 - 底层的类

ES6 引入了类语法，PHP 开发人员可能会觉得很熟悉。但不要被愚弄了 - 它只是原型继承的语法糖：

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");

来自战壕的专业技巧

经过多年使用 PHP 和 JavaScript，以下是我学到的一些技巧：

1. 尽可能选择组合而不是继承
2. 保持原型链浅 - 深链会损害性能
3. 使用类语法来获得更清晰的代码，但了解原型以进行调试
4. 手动创建继承链时始终设置构造函数属性

总结

理解原型继承一​​开始可能会感觉很奇怪，特别是如果您来自 PHP 或 Java。但一旦使用，您就会欣赏到它的灵活性和强大功能。这是 JavaScript 功能之一，它让您对面向对象编程有不同的思考。

您在 JavaScript 继承方面遇到过任何有趣的挑战吗？在下面发表评论 - 我很想听听你的故事！

以上是了解 JavaScript 的原型继承 - 开发指南的详细内容。更多信息请关注PHP中文网其他相关文章！