面试题：JavaScript中原型链的作用及对象创建与原型链的关系

Question

请详细阐述JavaScript中原型链是什么，它在对象属性和方法查找过程中起到什么作用？另外，以构造函数创建对象为例，说明对象创建过程是如何与原型链产生关联的。

Answer 1

原型链是什么

1. 基本概念：在JavaScript中，每个对象（除null外）都有一个 [[Prototype]] 内部属性，它指向该对象的原型对象。这个原型对象自身也有一个 [[Prototype]] 属性，这样就形成了一条链式结构，称为原型链。原型链的终点是 Object.prototype，它的 [[Prototype]] 为 null。
2. 原型的表示：在现代JavaScript中，可以通过 Object.getPrototypeOf() 方法获取对象的原型，或者使用 __proto__ 属性（非标准但广泛支持）。例如：

let obj = {};
let prototype = Object.getPrototypeOf(obj);
// 或者
let prototype2 = obj.__proto__;

原型链在对象属性和方法查找过程中的作用

1. 属性查找：当访问对象的某个属性时，JavaScript首先在对象自身的属性中查找。如果找不到，就会沿着原型链向上查找，直到找到该属性或者到达原型链的顶端（Object.prototype，其 [[Prototype]] 为 null）。例如：

function Animal() {}
Animal.prototype.speak = function() {
  console.log('I am an animal');
};
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
let myDog = new Dog();
myDog.speak(); // 虽然myDog自身没有speak方法，但会沿着原型链在Animal.prototype中找到并执行

2. 方法查找：方法本质也是属性，遵循同样的查找规则。当调用对象的某个方法时，首先在对象自身查找该方法，如果没有找到，就会沿着原型链查找，直到找到对应的方法并执行。

以构造函数创建对象为例说明对象创建过程与原型链的关联

1. 构造函数创建对象的基本步骤：
   • 创建新对象：使用 new 关键字调用构造函数时，首先会创建一个空的新对象。
   • 设置原型：新创建对象的 [[Prototype]] 会被设置为构造函数的 prototype 属性。例如：

function Person(name) {
  this.name = name;
}
let person = new Person('John');
// person.__proto__ === Person.prototype 为true

- **执行构造函数**：在新对象的上下文中执行构造函数，为新对象添加属性和方法（通常是实例属性和方法）。
- **返回新对象**：如果构造函数没有显式返回其他对象，就返回这个新创建的对象。

2. 原型链的形成：由于新对象的 [[Prototype]] 指向构造函数的 prototype，而构造函数的 prototype 自身又有 [[Prototype]]，这样就形成了原型链。例如，如果 Person.prototype 继承自 Object.prototype，那么 person 对象的原型链就是 person -> Person.prototype -> Object.prototype -> null。这种原型链结构使得 person 对象可以访问 Person.prototype 和 Object.prototype 上的属性和方法。