【前端】面试八股文——原型链

【前端】面试八股文——原型链

1. 什么是原型链？

在JavaScript中，每个对象都有一个原型（prototype），而原型本身又可能是另一个对象的原型。通过这种链式关系，可以实现属性和方法的继承，这就是原型链（prototype chain）。

简单来说，原型链是当我们试图访问对象的某个属性时，JavaScript引擎会首先查找对象本身，如果没有找到，则会沿着原型链逐级向上查找，直到找到该属性或到达原型链的顶端。

2. 原型与原型链的基本概念

• 对象：JavaScript中的一切都是对象，顶层对象是Object。
• 构造函数：用于创建对象的函数，被称为构造函数。示例：function Person(){}
• 原型：每个构造函数都有一个prototype属性，指向一个对象。
• 实例：通过构造函数创建的对象实例。使用new关键字。示例：const person = new Person();
• __proto__：每个对象都有一个__proto__属性，指向创建这个对象的构造函数的原型对象。

3. 原型链的示例

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
}

const alice = new Person('Alice');
alice.greet();  // 输出: Hello, my name is Alice

console.log(alice.__proto__ === Person.prototype);  // true
console.log(Person.prototype.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__ === null);  // true

在上面的例子中，我们可以看到原型链是如何形成的：

• alice的__proto__指向Person.prototype。
• Person.prototype的__proto__指向Object.prototype。
• Object.prototype的__proto__是null，表示原型链的顶端。

4. 常见面试题及解答方法

问题1：解释JS中的原型链？

解答：
JavaScript中的原型链是一种对象继承机制，它使得一个对象可以访问另一个对象的属性和方法。每个对象通过__proto__指针指向其原型，形成一个链式结构，最终指向null。这种机制允许我们通过原型链实现属性和方法的继承。

问题2：构造函数与原型链的关系是什么？

解答：
构造函数用于创建对象，每个构造函数都有一个prototype属性，指向一个原型对象。通过构造函数创建的对象，其__proto__属性指向构造函数的原型对象，从而形成原型链。

问题3：原型链的终点是什么？

解答：
原型链的终点是null。Object.prototype是所有对象的终极原型，其__proto__属性指向null。

问题4：如何实现继承？

解答：
JavaScript中可以通过原型链实现继承。例如，通过一个构造函数创建子类，并将其prototype属性指向另一个构造函数的实例。

function Parent() {
    this.parentProperty = true;
}
Parent.prototype.greet = function() {
    console.log('Hello from Parent');
}

function Child() {
    Parent.call(this);  // 继承构造函数的属性
}
Child.prototype = Object.create(Parent.prototype);  // 继承原型的属性和方法
Child.prototype.constructor = Child;

const child = new Child();
child.greet();  // 输出：Hello from Parent
console.log(child.parentProperty);  // true

5. 进阶：原型链性能和优化

理解原型链性能对于高级开发者至关重要。在访问属性时，查找过程会沿着原型链逐级向上，但过长的原型链可能影响性能。因此，保持适当长度的原型链和合理的对象层次结构是必要的。

6. 实际应用

1. 创建对象的共享方法

场景：避免重复定义方法

当多个实例对象需要共享相同的方法时，我们可以将这些方法定义在原型中，而不是在构造函数中重复定义。这样可以节省内存，并提高代码的可维护性和效率。

function Car(model, color) {
    this.model = model;
    this.color = color;
}

Car.prototype.startEngine = function() {
    console.log(`${this.model}'s engine is starting...`);
};

const car1 = new Car('Toyota', 'Red');
const car2 = new Car('Honda', 'Blue');

car1.startEngine();  // 输出: Toyota's engine is starting...
car2.startEngine();  // 输出: Honda's engine is starting...

console.log(car1.startEngine === car2.startEngine);  // true

通过将startEngine方法定义在Car的原型上，所有通过Car构造函数创建的实例都会共享这一方法，从而避免重复定义，节省内存。

2. 扩展和定制内置对象

场景：定制内置对象的方法

有时我们需要为内置对象（如数组或字符串）添加或修改方法，这可以通过修改其原型来实现。

Array.prototype.last = function() {
    return this[this.length - 1];
};

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.last());  // 输出：5

通过为Array.prototype添加last方法，所有数组实例都可以直接调用这个方法，从而在全局范围内扩展了数组对象的功能。

3. 面向对象编程

场景：实现类和继承

原型链是实现面向对象编程和继承的重要机制。在实际开发中，我们经常使用原型链来创建类和实现继承。

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name);  // 继承构造函数的属性
}

Dog.prototype = Object.create(Animal.prototype);  // 继承原型的属性和方法
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak();  // 输出：Rex barks.

通过这种方式，我们可以使用原型链实现类的继承，并在子类中覆盖父类的方法，从而实现更复杂的面向对象编程模式。

4. 实现混入（Mixin）

场景：复用代码片段

混入是一种代码复用模式，通过将一个对象的方法“混入”另一个对象或类中，来分享功能，而不是通过直接继承。

const canFly = {
    fly() {
        console.log(`${this.name} is flying.`);
    }
};

const canSwim = {
    swim() {
        console.log(`${this.name} is swimming.`);
    }
};

function Bird(name) {
    this.name = name;
}

Object.assign(Bird.prototype, canFly);

const bird = new Bird('Eagle');
bird.fly();  // 输出：Eagle is flying.

通过使用Object.assign方法，我们可以将多个对象的方法混入一个对象的原型中，从而实现代码复用，而不需要通过继承链的方式。

5. 实现模块化和命名空间

场景：避免命名冲突

为了避免全局命名空间污染，我们可以使用对象和原型链将功能模块化，确保每个模块有自己的命名空间。

const MyApp = {
    Models: {},
    Views: {},
    Controllers: {}
};

MyApp.Models.User = function(name) {
    this.name = name;
};

MyApp.Models.User.prototype.getName = function() {
    return this.name;
};

const user = new MyApp.Models.User('Alice');
console.log(user.getName());  // 输出：Alice

通过这种方式，我们可以清晰地组织代码，避免全局命名冲突，提高代码的可读性和可维护性。