前端 JavaScript 进阶面试题, 什么是 JavaScript 的原型链?

Step 1

Q:: 什么是 JavaScript 的原型链？

A:: JavaScript 的原型链是一个对象与其 prototype 属性之间的关系链。当我们访问对象的某个属性或方法时，JavaScript 引擎会首先在对象本身查找，如果没有找到，则会在对象的 prototype 属性（即原型）上查找，依次类推，直到找到属性或方法或达到原型链的顶端（即 null）。这种机制使得 JavaScript 可以实现继承和属性共享。

Step 2

Q:: 如何创建一个没有原型的对象？

A:: 可以使用 Object.create(null) 来创建一个没有原型的对象。这种对象没有从 Object.prototype 继承任何属性或方法，非常适合用于创建干净的字典对象。

Step 3

Q:: 解释一下 prototype 和 proto 的区别？

A:: prototype 是函数的一个属性，当函数被用作构造函数时，新创建的对象会将这个 prototype 属性作为自己的原型。proto 是对象的一个内部属性，指向该对象的原型（即构造函数的 prototype）。简单来说，prototype 是类（构造函数）上的属性，而 proto 是实例对象上的属性。

Step 4

Q:: JavaScript 中的继承是如何实现的？

A:: JavaScript 通过原型链实现继承。一个对象可以通过其 proto 属性引用另一个对象（即原型），从而继承其属性和方法。此外，ES6 引入了 class 语法糖，可以更方便地实现继承。可以使用 class 关键字和 extends 关键字定义子类，并通过 super 关键字调用父类的构造函数。

Step 5

Q:: 如何避免原型链上的属性被所有实例共享？

A:: 可以在构造函数内部定义属性，而不是在 prototype 上定义。这确保每个实例都有自己的独立属性。例如：

 
function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};
const person1 = new Person('Alice');
const person2 = new Person('Bob');
person1.name = 'Eve';
console.log(person2.name); // 仍然是 Bob