✅ JS 基础｜原型链

前言

本文用最简单的 js 函数配合图的形式讲述 js 中的原型、原型链、构造函数、实例、null 之间的关系

准备

代码

function Person() {}
const person = new Person()

打印输出

可以在 chrome 控制台中，执行 console.dir 打印内容

• 构造函数 Person 含有 prototype 和 proto

• 构造函数 Person 的原型含有 constructor 属性指回构造函数 Person，同时拥有 proto 属性指向 Object 的原型

• 构造函数 Person 的 proto 指向 Function 的原型

文字

名词解释

• proto：隐式原型
• prototype：构造函数的原型

• constructor：原型的 constructor 属性，指向构造函数

  文本解释

• person 通过 Person 构造函数 new 得到

  const person = new Person()

• person 的隐式原型指向构造函数 Person 的原型

  person.__proto__ === Person.prototype

• 构造函数 Person 有 prototype 属性指向原型

• 同时 Person 拥有隐式原型 __proto__ 指向 Function 的原型，代表构造函数 Person 也是一个 Function 的实例

  Person.__proto__ === Function.prototype

• Person 的原型拥有隐式原型 __proto__ 指向 Object 的原型

  Person.__proto__ === Object.prototype

• Person 的原型拥有构造函数属性 constructor 指回构造函数 Person

  Person.prototype.constructor === Person

• 最终 Object 的原型拥有隐式原型 __proto__ 指向 null

  Object.__proto__ === null

  图

  js 源头为 null，最下面为 person 实例
  

  参考

  🍭 图解原型和原型链

  附件

  原型链.graffle