2020面试收获 - 忆原型痛处，悟其精髓

前端

2024-02-04 14:49:02

2020年，一场肆虐全球的疫情，使得人们不得不居家隔离，我也因此离开生活多年的天津，只身一人来到北京，开始了我人生中的第一次跳槽。

在求职面试中，我频频被原型相关知识问住，每次回答都支支吾吾，语无伦次。在一次面试中，我被一家非常心仪的公司录用，但是在二面时，不出所料，我又被问到原型了！

对于原型的概念，我虽然有了一些了解，但理解还比较浅薄。随着时间的推移和理解的深入，我逐渐意识到原型知识的重要性。于是我痛定思痛，发愤图强，专研原型与原型链知识，并将其应用到实际工作中，取得了显著的效果。

原型链的由来

JavaScript是一种面向对象的语言，但它与其他面向对象语言，如Java和C++，在实现面向对象的方式上有所不同。在JavaScript中，面向对象编程是通过原型链来实现的。

原型链的概念可以追溯到JavaScript的创建者布兰登·艾奇（Brendan Eich）。在设计JavaScript时，艾奇借鉴了Self语言的原型系统，创建了一个类似于原型系统的机制，即原型链。

原型的作用与用途

在JavaScript中，每个对象都有一个原型，原型对象也是一个对象，也有自己的原型，以此类推，形成一个原型链。

对象的原型可以通过Object.getPrototypeOf()方法获取。例如：

const obj = {};
const prototype = Object.getPrototypeOf(obj);
console.log(prototype);

输出结果为：

{}

这表明对象的原型是一个空对象。

对象的原型可以被用来访问该对象的所有属性和方法。例如：

obj.name = 'John Doe';
console.log(obj.name); // John Doe
console.log(prototype.name); // undefined

输出结果为：

John Doe
undefined

这表明对象的属性和方法可以从其原型中继承。

原型链的概念

原型链的概念可以形象地理解为一个链表，每个对象都是链表中的一个节点，对象的原型是链表中的下一个节点，以此类推。

当一个对象访问一个不存在的属性或方法时，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法。如果在原型链中找不到该属性或方法，则会返回undefined。

例如：

const obj = {};
console.log(obj.name); // undefined

输出结果为：

undefined

这表明对象obj没有name属性，JavaScript引擎沿着原型链向上查找，但没有找到name属性，因此返回undefined。

原型与原型链在面向对象编程中的应用

在JavaScript中，原型与原型链在面向对象编程中发挥着重要的作用。

面向对象编程是一种将数据和行为封装成对象的编程范式。在面向对象编程中，对象是程序的基本组成单元，对象可以具有属性和方法。

在JavaScript中，对象可以通过字面量、构造函数和类来创建。

// 字面量创建对象
const obj = {};

// 构造函数创建对象
const Person = function(name) {
  this.name = name;
};

const person = new Person('John Doe');

// 类创建对象
class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person('John Doe');

无论哪种方式创建的对象，都会有一个原型。对象的原型可以通过Object.getPrototypeOf()方法获取。

对象的原型可以被用来访问该对象的所有属性和方法。例如：

console.log(person.name); // John Doe
console.log(Person.prototype.name); // undefined

输出结果为：

John Doe
undefined

这表明对象person的name属性可以从其原型Person.prototype中继承。

在面向对象编程中，原型链可以被用来实现继承。继承是指一个对象从另一个对象继承属性和方法。

在JavaScript中，可以使用原型链来实现继承。例如：

// 父类
const Person = function(name) {
  this.name = name;
};

// 子类
const Student = function(name, grade) {
  Person.call(this, name);
  this.grade = grade;
};

// 继承
Student.prototype = Object.create(Person.prototype);

// 创建学生对象
const student = new Student('John Doe', 10);

console.log(student.name); // John Doe
console.log(student.grade); // 10