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上编辑