JS深入之从原型到原型链

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

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

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

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

javascript 复制代码
//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.什么是原型链?(类似于家族族谱?或者可以说是找家族遗传病?)

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

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

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

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

javascript 复制代码
//1.当小狗玩具需要新功能时,原型没有
dog.sing();//原型没有,会报错

//2.那就在原型链上添加新功能
Object.prototype.sing = function(){
    console.log(this.name + '会唱歌!!!')
}

dog.sing()//输出优优会唱歌
  • 原型链像族谱:bear1BearToy.prototypeObject.prototypenull
  • 属性查找顺序:由近及远向上追溯

3.图解原型链关系

javascript 复制代码
// 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. 核心价值:实现属性和方法的共享,节省内存
相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路5 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔5 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang5 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔5 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴6 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔6 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js