面试题：JavaScript原型链与继承 - 原型链结构理解

Question

请描述JavaScript中对象的原型链是如何构建的，并举例说明一个对象在查找属性时，原型链的具体查找过程。

Answer 1

原型链的构建

1. 在JavaScript中，每个函数都有一个prototype属性，这个属性是一个对象，它默认有一个constructor属性，指向该函数本身。例如：

function Person() {}
console.log(Person.prototype.constructor === Person); // true

2. 当使用new关键字调用构造函数创建实例时，该实例的内部会有一个指向构造函数prototype属性的链接（在现代JavaScript引擎中，这个链接通常用[[Prototype]]表示，在代码中可以通过__proto__访问，但__proto__已不推荐使用）。例如：

function Person() {}
let person = new Person();
console.log(person.__proto__ === Person.prototype); // true

3. 原型对象本身也是一个对象，它也有自己的[[Prototype]]，这样就形成了一条链，称为原型链。原型链的顶端是Object.prototype，Object.prototype的[[Prototype]]为null。

属性查找过程举例

1. 假设有如下代码：

function Animal() {
    this.species = '动物';
}

function Dog() {
    this.name = '小狗';
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

let myDog = new Dog();

2. 当查找myDog的属性时：
   • 首先在myDog自身上查找。例如查找myDog.name，由于myDog自身有name属性，所以直接返回'小狗'。
   • 如果在myDog自身没有找到，就会沿着原型链向上查找，到Dog.prototype。例如查找myDog.species，myDog自身没有species属性，就到Dog.prototype查找，Dog.prototype也没有，继续向上查找。
   • 接着到Animal.prototype查找，这里找到了species属性，所以返回'动物'。
   • 如果一直到Object.prototype都没有找到，就返回undefined。例如查找myDog.age，最终会返回undefined。