Quiz

解释原型继承如何工作

Topics
JavaScriptOOP
在GitHub上编辑

这是一个极其常见的 JavaScript 面试问题。 所有 JavaScript 对象（用Object.create(null) 创建的对象除外）都有一个 __proto__ 属性，是指另一个对象，它叫做对象的“原型”。 当一个属性在一个对象上被访问时，如果该属性未在该对象上被找到， JavaScript 引擎看看对象的 __proto__、 __proto__ 的 __proto__ 等，直到它在一个 __proto__中找到定义的属性或直到它到达原型链的末尾。 这种行为模拟传统继承，但它实际上更多是委托而不是继承。

原型继承的例子

// Parent object constructor.
function Animal(name) {
  this.name = name;
}


// Add a method to the parent object's prototype.
Animal.prototype.makeSound = function () {
  console.log('The ' + this.constructor.name + ' makes a sound.');
};


// Child object constructor.
function Dog(name) {
  Animal.call(this, name); // Call the parent constructor.
}


// Set the child object's prototype to be the parent's prototype.
Object.setPrototypeOf(Dog.prototype, Animal.prototype);


// Add a method to the child object's prototype.
Dog.prototype.bark = function () {
  console.log('Woof!');
};


// Create a new instance of Dog.
const bolt = new Dog('Bolt');


// Call methods on the child object.
console.log(bolt.name); // "Bolt"
bolt.makeSound(); // "The Dog makes a sound."
bolt.bark(); // "Woof!"

需要注意的是：

  • .makeSound 没有定义在Dog上，因此引擎会在继承的原型链Animal上发现.makeSound。
  • Using Object.create to build the inheritance chain is no longer recommended. Use Object.setPrototypeOf instead.

Resources

在GitHub上编辑