原型和原型链

原型和原型链

一、最简原型链

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

三、参考文件

相关推荐
GIS之路1 小时前
GDAL 读取遥感影像数据
前端
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化
IT_陈寒2 小时前
Spring Boot 3.2 新特性全解析:这5个性能优化点让你的应用提速50%!
前端·人工智能·后端
携欢2 小时前
PortSwigger靶场之Stored DOM XSS通关秘籍
前端·xss
GDAL2 小时前
Knockout-ES5 入门教程
javascript·knockout
正义的大古2 小时前
OpenLayers数据源集成 -- 章节八:天地图集成详解
开发语言·javascript·ecmascript·openlayers
LDM>W<2 小时前
Electron下载失败
前端·javascript·electron
EndingCoder2 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
BillKu3 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
子兮曰3 小时前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx