原型和原型链

原型和原型链

一、最简原型链

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

三、参考文件

相关推荐
wearegogog1234 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars4 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤4 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·4 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°4 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854055 小时前
CSS动效
前端·javascript·css
烛阴5 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪6 小时前
markstream-vue实战踩坑笔记
前端
南村群童欺我老无力.6 小时前
Flutter应用鸿蒙迁移实战:性能优化与渐进式迁移指南
javascript·flutter·ci/cd·华为·性能优化·typescript·harmonyos
C_心欲无痕6 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx