原型和原型链

原型和原型链

一、最简原型链

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

三、参考文件

相关推荐
前端程序猿之路8 分钟前
简易版AI知识助手项目 - 构建个人文档智能问答系统
前端·人工智能·python·ai·语言模型·deepseek·rag agent
失败又激情的man8 分钟前
爬虫逆向之阿里系cookie acw_sc__v2 逆向分析
前端·javascript·爬虫
小肖爱笑不爱笑10 分钟前
Vue Ajax
前端·javascript·vue.js·web
四瓣纸鹤11 分钟前
闭包到底是啥?
javascript·闭包
全栈技术负责人19 分钟前
我的大前端世界观 (黄玄 - FEDAY 2023)
前端
changlianzhifu120 分钟前
分账系统:从“资金管道“到“增长引擎“,重塑商业价值分配新范式
java·服务器·前端
异界蜉蝣22 分钟前
前端模块化的演进史:从混乱到秩序
前端
宠..23 分钟前
QButtonGroup
java·服务器·开发语言·前端·数据库·c++·qt
写代码的【黑咖啡】28 分钟前
Python中的文件操作详解
java·前端·python
Moment31 分钟前
一文搞懂 Tailwind CSS v4 主题变量映射背后的原理
前端·javascript·面试