原型和原型链

原型和原型链

一、最简原型链

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

三、参考文件

相关推荐
mCell6 分钟前
JavaScript:从事件循环到手写 Promise
javascript·面试·浏览器
芯芯点灯1 小时前
gd32f303烧录提示Flash Timeout. Reset the Target and try it again.;
开发语言·前端·javascript
前端若水1 小时前
自定义消息组件:图片、文件附件与图表
前端·人工智能·react.js·typescript
2601_958492551 小时前
7 Best WordPress Tools to Help Your News Site Actually Make Money
前端·word
放下华子我只抽RuiKe51 小时前
React 从入门到生产(七):性能优化实战
前端·javascript·人工智能·react.js·性能优化·前端框架·github
糯米团子7491 小时前
vue知识点复习
前端·vue.js
范同学~1 小时前
多个表单如何用element ui 校验
javascript·vue.js·ui
晚烛1 小时前
CANN 日志系统:调试与性能分析的日志艺术
前端·chrome·数据挖掘
FlyWIHTSKY1 小时前
Next中引入 Ant Design (antd)的配置
开发语言·前端·javascript
JAVA学习通1 小时前
《大营销平台系统设计实现》 - 营销服务 第9节:模板模式串联抽奖规则
服务器·前端·javascript