当前位置: 首页 > news >正文

原型

什么是原型(prototype)
每个函数在出生时就自带一个属性:
函数名.prototype —— 它是一张空对象,浏览器里叫 Foo.prototype。
每个对象在出生时也自带一个“隐姓埋名”的属性:
对象.proto(规范名 [[Prototype]]),它指向自己构造函数的 prototype。

用处:让所有实例共享一份方法/数据,省内存 + 能动态升级。
一、没有原型时:方法满天飞,内存爆炸
JavaScript
复制
function User(name) {
this.name = name
this.sayHi = function () { // 每个实例都新建一份
console.log(Hi, ${this.name})
}
}

const u1 = new User('Tom')
const u2 = new User('Jerry')

console.log(u1.sayHi === u2.sayHi) // false ➜ 100 万个用户就 100 万份函数
内存示意图:
复制
u1 : { name: 'Tom', sayHi: <func obj#1> }
u2 : { name: 'Jerry',sayHi: <func obj#2> } // 两份完全一样的代码
二、把方法挂到原型上:只存一份,所有实例自动可用
function User(name) {
this.name = name // 实例私有属性
}
// 公有方法 → 原型仓库
User.prototype.sayHi = function () {
console.log(Hi, ${this.name})
}

const u1 = new User('Tom')
const u2 = new User('Jerry')

console.log(u1.sayHi === u2.sayHi) // true ➜ 同一份函数
u1.sayHi() // Hi, Tom
u2.sayHi() // Hi, Jerry
内存示意图:
u1 : { name: 'Tom', proto -> User.prototype }
u2 : { name: 'Jerry',proto -> User.prototype } // 指向同一份

User.prototype : { sayHi: <func obj#1> }
原型链
当读取 对象.属性 时:
1.先看对象自身有没有;
2.没有 → 沿 proto 去原型对象找;
3.再没有 → 原型的原型(protoproto)……
4.直到 null 为止,这条链式查找路径就叫原型链。
u1.proto → Foo.prototype → Foo.prototype.proto → Object.prototype → null
作用 = 复用方法、实现继承、属性共享、instanceof 判断。

http://www.hskmm.com/?act=detail&tid=17717

相关文章:

  • 集训队作业1——qoj#11722
  • 如何设置将浏览器网页临时禁用网页mathjax渲染直接查看latex编译前的文本
  • 《IDEA 2025破解 长效使用指南:2099 年有效期配置实战之JetBrains全家桶有效》​
  • Helloworld
  • 基于菲涅尔积分的角锥喇叭方向图计算
  • Flask的ORM工具SQLAlchemy
  • 使用 Rust 和 Tesseract OCR 实现英文数字验证码识别
  • 构建复合AI系统以实现可扩展工作流
  • Python HTTPS 爬虫实战,requests aiohttp Selenium 抓取技巧、HTTPS 问题与抓包调试(python https爬虫、反爬、抓包、证书处理)
  • GreatSQL 优化技巧:最值子查询与窗口函数相互转换
  • Windows Time 时间同步时出错
  • CCS开发环境和TMS320系列DSP实现IP-IQ谐波与无功电流检测
  • 多机动模型PHD滤波算法
  • Navicat17无限试用重置14天
  • 基于Electron的Web打印解决方案:web-print-pdf技术分享
  • CF455D Serega and Fun
  • 实验任务
  • 61.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--新增功能--提取金额 - 实践
  • 使用 Ansible 部署 Elasticsearch 集群
  • 免费无广告!这款开源工具让文件转换像复制粘贴一样简单!
  • 时序InSAR形变结果合并操作说明 - ENVI
  • CSP-S 2025 #2
  • 完整教程:38.应用层协议HTTP(一)
  • 在Vue.js中设置方法时访问$vuetify实例
  • 纷享销客CRM任务系统:破解快消品终端动销管理难题
  • 第一周博客作业-介绍自己
  • AI大模型应用简介 - 努力-
  • React 基础核心概念(8 个)——从入门到能写业务组件(上)| 葡萄城技术团队
  • 2 day - when
  • 罗氏线圈选型技术指南:精准电流测量的关键抉择​​