一道考察原型的面试题

原型：了解 JavaScript 中继承的关键概念

在 JavaScript 的世界里，原型是一个至关重要的概念，它允许我们创建新对象，并让它们继承现有对象的属性和方法。这种机制被称为原型继承。今天，我们将深入探讨原型，并通过一个经典的面试题来理解它的工作原理。

什么是原型？

原型是一个特殊的对象，它包含所有其他对象共享的属性和方法。当我们创建新的对象时，JavaScript 会自动创建一个链接到其原型对象的内部属性。这个内部属性称为 [[Prototype]]，它允许新对象访问原型对象上的属性和方法。

原型链：沿着继承链

原型链了从一个对象到其原型对象，再到其原型对象的原型对象，一直到最终到达 Object.prototype（所有对象的祖先）的过程。在原型链上，每个对象都可以访问其所有原型对象上的属性和方法。

面试题：深入了解原型

以下是一个经典的面试题，可以帮助我们理解原型的工作原理：

function Foo() {
  this.a = 1;
  this.b = 2;
}

Foo.prototype.c = 3;

let obj = new Foo();

console.log(obj.a); // 1
console.log(obj.b); // 2
console.log(obj.c); // 3
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('b')); // true
console.log(obj.hasOwnProperty('c')); // false

解释：

• console.log(obj.a); // 1：obj 对象有自己的 a 属性，值为 1，因此输出 1。
• console.log(obj.b); // 2：obj 对象有自己的 b 属性，值为 2，因此输出 2。
• console.log(obj.c); // 3：obj 对象没有自己的 c 属性，但它的原型对象 Foo.prototype 有 c 属性，值为 3。因此，obj 对象可以通过原型链访问 Foo.prototype.c 属性，并输出 3。
• console.log(obj.hasOwnProperty('a')); // true：obj 对象有自己的 a 属性，因此 hasOwnProperty() 方法返回 true。
• console.log(obj.hasOwnProperty('b')); // true：obj 对象有自己的 b 属性，因此 hasOwnProperty() 方法返回 true。
• console.log(obj.hasOwnProperty('c')); // false：obj 对象没有自己的 c 属性，因此 hasOwnProperty() 方法返回 false。

总结：

这个面试题展示了原型链是如何工作的。obj 对象是 Foo 函数的实例，它继承了 Foo.prototype 对象的属性和方法。因此，obj 对象可以通过原型链访问 Foo.prototype.c 属性，并输出 3。

常见的原型问题

以下是关于原型的一些常见问题：

1. 原型是如何创建的？
   • 当我们创建函数时，JavaScript 会自动为该函数创建一个原型对象。
2. 原型链是如何终止的？
   • 原型链在遇到 Object.prototype 对象时终止。Object.prototype 是所有对象的祖先，没有自己的原型。
3. 修改原型会影响现有对象吗？
   • 是的，修改原型也会影响所有从该原型继承的现有对象。
4. 原型可以包含函数吗？
   • 是的，原型可以包含函数，这些函数称为原型方法。
5. JavaScript 中有原型污染的问题吗？
   • 是的，在 JavaScript 中，原型污染是一个安全问题，它允许修改其他对象的原型，从而可能导致意外行为。