JS原型的冰山一角：揭开原型链的神秘面纱

前端

2023-12-20 09:24:05

对于身经百战的前端工程师而言，JavaScript仿佛是赖以生存的利器。然而，JavaScript的三座大山——原型、原型链和作用域——却让许多开发者望而却步。在这段七日打卡之旅中，我们将率先攀登第一座高峰：原型和原型链，揭开其神秘面纱。

原型：对象的遗传密码

JavaScript中，每个对象都拥有一个原型，它充当对象的遗传密码。当对象需要访问一个不存在的属性或方法时，它会沿着原型链向上查找，直到找到该属性或方法为止。

原型链：对象的家族谱系

原型链是一条连接对象与其原型的链。从对象开始，沿原型链向上查找，最终到达一个没有原型的对象，即Object.prototype。它就像一个家族谱系，记录了对象之间的继承关系。

探秘原型链的奥妙

__proto__属性： 每个对象都有一个__proto__属性，指向其原型。
Object.getPrototypeOf()方法： 返回指定对象的原型。
Object.create()方法： 创建一个新对象，并指定其原型。
instanceof运算符： 检查一个对象是否属于某个类的实例，即是否在该类的原型链上。

示例：

const person = {
  name: 'John',
  age: 30
};

console.log(person.__proto__); // 输出：Object { ... }，即Object.prototype
console.log(Object.getPrototypeOf(person)); // 输出：Object { ... }

const employee = Object.create(person);
employee.job = 'Software Engineer';

console.log(employee.__proto__); // 输出：Object { name: 'John', age: 30 }，即person
console.log(employee instanceof Person); // 输出：true