原型和原型链

原型和原型链

一、最简原型链

js 复制代码
function Person()
let person1 = new Person();
console.log(person1)
  • js 分为函数对象和普通对象,每个对象都有 __proto__ 属性,但只有函数对象有 prototype

    • 普通对象:除了函数对象外的所有对象,不可以被调用
    • 函数对象:具有属性和方法、可以被调用、还有 call 属性
  • Object、Function、Array、Date、Boolean、Number、String、RegExp 都是 js 内置函数

二、原型链内部相等关系

(1) 原型链内部相等关系图

(2) 关系图归纳

所有相等关系,基于以下 2 条规则衍生

  • 规则 1:原型对象(即 Person.prototype )的 constructor 指向构造函数本身
  • 规则 2:实例(即 person1 )的 __proto__ 和 原型对象 指向同一个地方
js 复制代码
Person.prototype.constructor == Person; // 规则1 结果 true
person1.__proto__ == Person.prototype; // 规则2 结果 true

(3)对照关系图实践

js 复制代码
function Foo() {}
let f1 = new Foo();
let f2 = new Foo();
let o1 = new  Object();
let o2 = new  Object();
从图上部的 function Foo() 开始分析
js 复制代码
f1.__proto__ == Foo.prototype; // 结果 true
f2.__proto__ == Foo.prototype; // 结果 true
  1. Foo.prototype、Function.prototype 本质也是普通对象
js 复制代码
Foo.prototype.__proto__ == Object.prototype; // 结果 true

// 规则1
Foo.__proto__ = Function.prototype; // 规则2
Function.prototype.__proto__ == Object.prototype; //  规则2 (Function.prototype本质也是普通对象,可适用规则2)
  1. 原型链在 Object.prototype.proto 处终止
js 复制代码
Object.prototype.__proto__ == null; // // 结果 true 原型链到此停止
  1. 注意 Foo 和 Function 的区别, Foo 是 Function 的实例
js 复制代码
Foo == Function; // 结果 false, Foo 是 Function 的实例, 两者并不相等
Foo.constructor == Function; // 结果true
Foo.__proto__ == Function.prototype; // 结果true
Foo.prototype.constructor == Foo; // 结果true
从图中部的 function Object() 开始分析
js 复制代码
o1.__proto__ == Object.prototype; // 结果 true
o2.__proto__ == Object.prototype; // 结果 true
Object.prototype.__proto__ == null; // 结果 true, 原型链到此停止
Object.prototype.constructor == Object; // 结果 true, 规则1
Object.__proto__ == Function.prototype; // 结果 true, Object本质也是函数
Function.prototype.__proto__ == Object.prototype; // 结果 true, 规则2 (Function.prototype本质也是普通对象,可适用准则2)
从图下部的 function Function() 开始分析
js 复制代码
Function.__proto__ == Function.prototype; // 结果 true, 规则2
Function.prototype.constructor == Function; // 结果 true, 规则1

三、参考文件

相关推荐
90后的晨仔12 小时前
从 H5 到 uni-app:一篇写给前端小白的"翻译指南"
前端·vue.js·前端框架
陈随易12 小时前
moon,apt和yum之外linux系统命令安装新选择
前端·后端·程序员
IT小盘13 小时前
13-企业Prompt模板-角色任务约束与输出格式
java·前端·prompt
徐小夕13 小时前
开源!我用SQLite + DuckDB打造了一款可视化AI问数平台
前端·算法·github
leslie11814 小时前
babel笔记
前端
用户0595401744614 小时前
Redis 记忆存储踩坑实录:一个并发写入 Bug 让我排查了 4 小时
前端·css
小徐_233315 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·微信小程序·uni-app
kyriewen15 小时前
Claude自己跑出去hack了3家公司——我为什么还在用它写代码
前端·ai编程·claude
IT_陈寒15 小时前
SpringBoot自动配置的坑,这次真踩疼我了
前端·人工智能·后端
子兮曰15 小时前
AI 浏览器 Agent 的安全困局:当自动化工具可以偷走你的登录态
前端·人工智能·后端