原型链 - 技术栈

本质

原型链的本质是链表，它的节点是各种原型对象

作用

原型链是 JavaScript 中实现继承的核心机制，通过__proto__链连接各种原型对象。

继承机制 ：当访问对象属性时，若自身不存在，则沿原型链向上查找，直到找到或到达 null。

概念

原型对象（Prototype）：每个对象都有一个隐藏属性 __proto__，指向其构造函数的 prototype 对象。

构造函数 ：当使用 new 调用时，会创建新实例的函数。其 prototype 属性将作为实例的原型。

例子

js 复制代码

// 这里在底层是用类Object的构造函数创造出的对象，等价于 new Object()
const obj = {};

// 实例的 __proto__ 指向构造函数的 prototype 
console.log(obj.__proto__ === Object.prototype); // true

这个例子里的原型链是这样的 obj -> Object.prototype -> null

js 复制代码

// 这里在底层是用类Array的构造函数创造出的对象，等价于 new Array()
const arr = [];

// 实例的 __proto__ 指向构造函数的 prototype
console.log(arr.__proto__ === Array.prototype);  // true

这个例子里的原型链是 arr -> Array.prototype -> Object.prototype -> null

js 复制代码

// 这里在底层是用类Function的构造函数创造出的对象，等价于 new Function()
const func = function a(){};

// 补充：箭头函数无 prototype 属性，但 __proto__ 也指向 Function.prototype

// 实例的 __proto__ 指向构造函数的 prototype
console.log(func.__proto__ === Function.prototype);  // true

这个例子里的原型链是这样的 func -> Function.prototype -> Object.prototype -> null

可以看出除了通过Object.create(null)直接创建的对象外，其他所有对象（包括函数、数组等）的原型链上都会出现Object.prototype，而原型链终点也都是 null

ps:

js 复制代码

// 这样创建出来的对象，原型链是 obj -> null
const obj = Object.create(null);

继承场景

使用现代语法（ES6 Class）,语法糖 class 和 extends ，底层基于原型链：

javascript 复制代码

class Parent {}
class Child extends Parent {}

const child = new Child();
// instanceof用来检测对象是否在原型链上
console.log(child instanceof Parent); // true