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. 核心价值:实现属性和方法的共享,节省内存
相关推荐
前端(从入门到入土)9 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗36 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5