js 原型链 prototype 产生原因及具体实现原理

原型链笔记

  • 原型链是为什么产生的?
  • 我们应该怎么理解他呢?

原型链的产生, 是为了解决 编程语言中继承和复用的问题, 相较于 java、或是python, js也是一门编程语言所以也要解决这两个问题,但是解决的办法又不能和已有的两种语言一样 所以产生了原型链这个概念。

简单来说 原型链的产生就是为了解决 编程语言中的继承和复用问题

  • 那我们要如何自己手写一个简单的原型链呢?

首先我们要知道获取原型的几种方法都有哪些

1.通过实例对象获取:const arr = new Array(); arr.__proto__ 解释:其中的__proto__属性是人为定义的 它指向原型对象

2.通过构造函数获取:function Constructor(){}; Constructor.prototype解释:在构造函数中有默认的属性,👇构造函数属性值

3.通过方法获取:Object.getPrototypeOf(构造函数) 解释:通过对象方法 get 到prototype 方法参数为构造函数

js 复制代码
//原型对象中最为重要的两个属性 
// constructor:赋值当前构造函数, 
// __proto__:赋值 当前原型的上一级原型 [最顶层原型对象 的上一级是null]
const prototypes = { 
  // 当前构造函数
  constructor: A,
  // 上级构造函数
  __proto__ : null
}

// 创建一级构造函数↓
function A() {
  this.a = 123
  // 函数中自定义的属性__proto__ 属性;存放当前构造函数的原型对象
  this.__proto__ = A.prototype
}
// 将自定义原型对象替换默认原型对象
A.prototype = prototypes
// 实例化, 查看结果
const a = new A()
console.log(a, a.__proto__);

// 创建二级 构造函数↓
function B() {
  this.b = 234
  // 函数中自定义的属性__proto__ 属性;存放当前构造函数的原型对象
  this.__proto__ = B.prototype
}
// 绑定 原型对象必备的两个属性值
B.prototype.constructor = B
B.prototype.__proto__ = a
const b = new B()
// 实例化对象并查看结果
console.log(b)

总结:原型是如何形成原型链

原型 prototype == \[ prototype ] 【不全等】 其中 prototype 是原型对象

\[ prototype ] 是浏览器内部的属性的值, 也是处理过之后展示给用户的的原型对象【其中并不会直接展示__proto__ 这个属性】

原型对象:prototype

其中有两个 最为重要的值

  1. constructor : constructor我们用来和构造函数来相互转化,他的赋值是当前 原型对象的构造函数的回调
  2. proto : 有两个地方出现了它【构造函数人为添加 为当前构造函数的回调,prototype属性中的 proto 用来指向上一级的实例对象 也是形成链式解构的关键属性】

参考连接:js 从语言设计的角度问:为什么要设计原型prototype ? - 掘金

相关推荐
To_OC2 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC2 小时前
LC 17 电话号码的字母组合:我的回溯算法,就是从这道题开窍的
javascript·算法·leetcode
你怎么知道我是队长4 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
名字还没想好☜5 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司5 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
心中有国也有家6 小时前
AtomGit Flutter 鸿蒙客户端:ModalBottomSheet 实战
android·javascript·学习·flutter·华为·harmonyos
仙人球部落8 小时前
-python-LangGraph框架(3-31-LangGraph 「合并式状态管理」的原理与实践)
开发语言·javascript·python
sunfdf9 小时前
Next.js 新手从零部署到首跑实战指南
开发语言·javascript·ecmascript
SmartBoyW9 小时前
前端死磕:一文彻底搞懂 JS 事件循环 (Event Loop) 与宏微任务
前端·javascript
mONESY10 小时前
基于MCP协议搭建全链路智能Agent:地图检索+浏览器自动化+本地文件操控实战
javascript