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

JS深入之从原型到原型链

1.什么是原型?(玩具模具)假设现在是在一个玩具工厂

构造函数===小狗玩具模型

原型=====玩具模型所共有的属性(类似于通用组件?或者说公共方法)

实例对象======所生产的小狗玩具

//1.这是一个小狗玩具模具(构造函数)
function dogToy(name){this.name = name
};//2.给小狗感觉添加都会叫的功能
dogToy.prototype.shout = function(){console.log(this.name + '在汪汪叫!!!')
}//3.生产小狗玩具(实例对象)
const dog = new dogToy('优优');
dog.shout();//打印出来就是优优在汪汪!

  • 所有通过 new dogToy() 生产的玩具,自动继承模具原型(shout 功能)
  • 原型像公共工具箱,省去给每个玩具单独装功能的麻烦

2.什么是原型链?(类似于家族族谱?或者可以说是找家族遗传病?)

        当小狗玩具需要新功能时:

        先看看自己有没有这个属性;

        如果自己没有,就去找原型,看看原型有没有

        原型要是没有,就去找原型的原型,一直像这样找,直到找到或者直到尽头如法在找

        

//1.当小狗玩具需要新功能时,原型没有
dog.sing();//原型没有,会报错//2.那就在原型链上添加新功能
Object.prototype.sing = function(){console.log(this.name + '会唱歌!!!')
}dog.sing()//输出优优会唱歌

  • 原型链像族谱:bear1 → BearToy.prototype → Object.prototype → null
  • 属性查找顺序:由近及远向上追溯

3.图解原型链关系

// 1. 实例与构造函数原型
console.log(bear1.__proto__ === BearToy.prototype); // true// 2. 构造函数原型与顶级原型
console.log(BearToy.prototype.__proto__ === Object.prototype); // true// 3. 顶级原型的终点
console.log(Object.prototype.__proto__); // null
  • 实例.__proto__ → 指向「构造函数的原型」
  • 构造函数.prototype → 指向「原型对象」
  • 链条终点是 null

4.总结

  1. 原型:构造函数的公共工具箱(构造函数.prototype
  2. 原型链:实例 → 构造函数原型 → 上级原型 → ... → null
  3. 核心价值:实现属性和方法的共享,节省内存

相关文章:

  • 替代爬虫!亚马逊API采集商品详情实时数据开发教程
  • 苹果签名应用掉签频繁原因排查,以及如何避免
  • 第十六章 I2C
  • python 中线程、进程、协程
  • 【动作】AVA:时空定位原子视觉动作视频数据集
  • java 数据结构-HashMap
  • 零基础玩转物联网-串口转以太网模块如何快速实现与MQTT服务器通信
  • 如何提升企微CRM系统数据的准确性?5大核心策略详解
  • opencv RGB图像转灰度图
  • 华为云Flexus+DeepSeek征文 | 华为云ModelArts Studio快速上手:DeepSeek-R1-0528商用服务的开通与使用
  • 软件定义汽车的转型之路已然开启
  • SkyWalking 10.2.0 SWCK 配置过程
  • ARM内存理解(一)
  • AutoCAD 2024 保姆级安装教程【2025最新】(附安装包)
  • 智能卷料系统仿真|从动建模到零停机优化—MapleSim卷料处理库工业级解决方案
  • 使用 VSCode 开发 FastAPI 项目(1)
  • 华为云Flexus+DeepSeek征文|体验华为云ModelArts快速搭建Dify-LLM应用开发平台并创建联网大模型
  • VScode - 我的常用插件01 - 主题插件Noctis
  • 【Css】css修改滚动条的样式
  • flutter基础面试知识汇总(二)
  • 合川网站建设公司/宁波网站关键词优化代码
  • 网站设计毕业论文的模板咋写/seo网络推广企业
  • 网站开发 入门 pdf/全国十大跨境电商排名
  • 江苏专业做网站的公司有哪些/微信推广引流加精准客户
  • 淘宝网站用什么语言做的/百度最新版app下载安装
  • 视频新闻网站 建设/seo求职信息