从生活场景学透 JavaScript 原型与原型链

一、构造函数:以 “人” 为例的对象工厂

1. 生活场景下的构造函数定义

我们以 “人” 为场景创建构造函数,每个人都有姓名、年龄等个性化属性,也有人类共有的特征:

// 人类构造函数
function Person(name, age) {this.name = name;this.age = age;// 每个人独特的属性this.hobby = `喜欢 ${name}的爱好`;
}// 创建两个人的实例
const person1 = new Person("小明", 20);
const person2 = new Person("小红", 22);console.log(person1); // Person { name: '小明', age: 20, hobby: '喜欢小明的爱好' }
console.log(person2); // Person { name: '小红', age: 22, hobby: '喜欢小红的爱好' }

2. 基础数据类型的生活类比

以 “水果” 为例理解基础数据类型的两种定义方式:

// 定义水果的两种方式
let fruit1 = "苹果"; // 字面量方式
let fruit2 = new String("香蕉"); // 构造函数方式console.log(fruit1); // 苹果
console.log(fruit2); // 香蕉

二、原型(prototype):提取人类共同特征

1. 提取人类共同属性到原型

人类共有的属性(如物种、默认行为)适合放在原型上:

// 优化:将人类共同属性放到原型上
Person.prototype.species = "智人";
Person.prototype.gender = "默认未知";
Person.prototype.speak = function() {return `${this.name}说:你好!`;
};function Person(name, age) {this.name = name;this.age = age;this.hobby = `喜欢 ${name}的爱好`;
}const person1 = new Person("小明", 20);
const person2 = new Person("小红", 22);// 访问原型上的属性
console.log(person1.species); // 智人
console.log(person2.speak()); // 小红说:你好!
console.log(person1); // Person { name: '小明', age: 20, hobby: '喜欢小明的爱好' }

2. 原型属性的不可修改性演示

尝试修改原型属性,观察实例的变化:

// 原型属性不可修改的演示
Person.prototype.species = "智人";
Person.prototype.speak = function() {return `${this.name}说:你好!`;
};function Person(name, age) {this.name = name;this.age = age;
}const person = new Person("小明", 20);console.log(person.species); // 智人
// 尝试修改原型属性
person.species = "外星人";
console.log(person.species); // 外星人(实例自身添加了属性)
console.log(Person.prototype.species); // 智人(原型属性未改变)

三、对象原型(proto):隐式链接的生活比喻

1. 隐式原型的链接关系

以 “动物” 为例说明隐式原型的指向关系:

// 动物构造函数
function Animal() {}
Animal.prototype.eat = function() {return "正在进食";
};// 狗构造函数
function Dog(name) {this.name = name;
}
// 狗的原型指向动物的原型
Dog.prototype = new Animal();const dog = new Dog("旺财");// 验证隐式原型关系
console.log(dog.__proto__ === Dog.prototype); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true
console.log(dog.eat()); // 正在进食(通过原型链调用)

2. 隐式原型的查找机制

通过 “学生” 对象演示属性查找过程:

// 学生构造函数
function Student(name) {this.name = name;
}// 学生原型添加属性
Student.prototype.school = "默认学校";
Student.prototype.study = function() {return `${this.name}在学习`;
};const student = new Student("小李");// 查找属性的过程
console.log(student.name); // 小李(自身属性)
console.log(student.school); // 默认学校(原型属性)
console.log(student.study()); // 小李在学习(原型方法)

四、this 的原理:从 “创建房屋” 理解 new 操作

1. 房屋构造函数中的 this

模拟房屋建造过程,理解 this 在构造函数中的作用:

// 房屋构造函数
function House(owner, area) {this.owner = owner;this.area = area;this.roomCount = 3; // 默认3个房间// 这里隐含了new的执行过程// 1. 创建空对象 obj = {}// 2. this指向obj// 3. 执行属性赋值// 4. obj.__proto__ = House.prototype// 5. 返回obj
}House.prototype.address = "未知地址";
House.prototype.showInfo = function() {return `${this.owner}的房子,面积 ${this.area}㎡,位于 ${this.address}`;
};const myHouse = new House("张三", 120);
console.log(myHouse.showInfo()); // 张三的房子,面积120㎡,位于未知地址

五、原型链:从 “交通工具” 看对象继承关系

1. 交通工具的原型链结构

通过交通工具的层级关系展示原型链:

// 交通工具基类
function Vehicle() {this.type = "交通工具";
}
Vehicle.prototype.move = function() {return "正在移动";
};// 汽车类
function Car(brand) {this.brand = brand;
}
Car.prototype = new Vehicle();
Car.prototype.drive = function() {return `${this.brand}汽车在行驶`;
};// 电动车类
function ElectricCar(brand, battery) {Car.call(this, brand);this.battery = battery;
}
ElectricCar.prototype = new Car("默认品牌");
ElectricCar.prototype.charge = function() {return `正在给 ${this.brand}电动车充电`;
};// 创建电动车实例
const car = new ElectricCar("特斯拉", "锂电池");// 原型链查找演示
console.log(car.brand); // 特斯拉(自身属性)
console.log(car.drive()); // 特斯拉汽车在行驶(Car原型方法)
console.log(car.move()); // 正在移动(Vehicle原型方法)
console.log(car.charge()); // 正在给特斯拉电动车充电(自身方法)

2. 原型链的根对象演示

通过 Object.create 创建特殊对象:

// 普通对象
const normalObj = new Object();
console.log(normalObj.__proto__); // Object.prototype// 使用Object.create创建无原型的对象
const specialObj = Object.create(null);
console.log(specialObj.__proto__); // undefined// 验证原型链终点
console.log(Object.prototype.__proto__); // null

六、生活场景总结表

概念生活类比代码
构造函数工厂生产线首字母大写,用 new 创建实例
原型 (prototype)人类共同特征手册存放同类对象的公共属性和方法
隐式原型 (proto)家族族谱实例指向构造函数的原型
原型链生物进化树多层继承关系形成的属性查找链路
this工厂中的施工图纸指向新创建的对象实例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/87921.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/87921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学c++ cpp 可以投递哪些岗位

此次描述知识针对应届生来说哈,如果是社招,更多是对于你目前从事的方向,技术栈进行招聘就好了。 此次编写是按照boss上岗位筛选的方式进行编写的,其实投简历一般也是用boss,后面也会出一篇文章给大家介绍一般找工作都用…

【Docker基础】Docker镜像管理:docker rmi、prune详解

目录 引言 1 Docker镜像管理概述 1.1 为什么需要镜像清理? 1.2 镜像生命周期管理 2 docker rmi命令详解 2.1 基本语法 2.2 常用选项 2.3 删除单个镜像 2.4 删除多个镜像 2.5 强制删除镜像 2.6 删除所有镜像 3 docker rmi工作原理 3.1 镜像删除流程 3.…

57-Oracle SQL Profile(23ai)实操

在上一期中说到了SQL Tuning Advisor其中一个影响对象就是SQL Profile,同样在管理和应用开发中,SQL性能优化是个任重道远的工作,低效的SQL语句让应用响应缓慢,用户整体体验下降,拖垮搞蹦整个系统都有可能。Oracle数据库提供了多种组合工具,有…

man的使用

man的使用 文章目录 man的使用基本用法:常见 man 命令操作:man 命令的章节:示例: man 是 Linux 和 macOS 系统中的命令,用于查看命令和程序的手册页(manual pages)。手册页包含了关于命令、函…

【蓝牙】手机连接Linux系统蓝牙配对,Linux Qt5分享PDF到手机

要实现手机连接 A40i Linux 系统并通过蓝牙接收 PDF 文件,可以按照以下步骤操作: 1. 配置 Linux 蓝牙功能 确保开发板上的蓝牙模块已正确驱动并支持蓝牙协议栈。 安装蓝牙工具: bash sudo apt install bluetooth bluez bluez-tools 启动蓝…

1432. 改变一个整数能得到的最大差值

1432. 改变一个整数能得到的最大差值 题目链接&#xff1a;1432. 改变一个整数能得到的最大差值 代码如下&#xff1a; class Solution { public:int maxDiff(int num) {string s to_string(num);function<int(char, char)> replace_stoi [&](char old_char, cha…

解密 Spring MVC:从 Tomcat 到 Controller 的一次完整请求之旅

今天&#xff0c;想和你聊一个我们每天都在打交道&#xff0c;但可能不曾深入思考的话题&#xff1a;当一个 HTTP 请求从浏览器发出&#xff0c;到最终被我们的 Spring Controller 处理&#xff0c;它到底经历了一场怎样的旅程&#xff1f; 理解这个流程&#xff0c;不仅仅是为…

在 Java 中操作 Map时,高效遍历和安全删除数据

在 Java 中操作 Map 时&#xff0c;高效遍历和安全删除数据可以通过以下方式实现&#xff1a; 一、遍历 Map 的 4 种高效方式 1. 传统迭代器&#xff08;Iterator&#xff09; Map<String, Integer> map new HashMap<>(); map.put("key1", 5); map.pu…

力扣-136.只出现一次的数字

题目描述 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 class Solution {public i…

Go 网络编程:HTTP服务与客户端开发

Go 在标准库中内置了功能强大的 net/http 包&#xff0c;可快速构建高并发、高性能的 HTTP 服务&#xff0c;广泛应用于微服务、Web后端、API中间层等场景。 一、快速创建一个HTTP服务 示例&#xff1a;最简Hello服务 package mainimport ("fmt""net/http&quo…

【Prism】 实现注入的几个标准化步骤(相机举例)

📸 Prism 架构中如何优雅地注册和注入相机服务 在开发基于 Prism + WPF 的应用时,合理使用依赖注入(DI)可以大大提高系统的可维护性和扩展性。本文以一个多相机平台管理系统为例,展示如何通过接口、枚举、容器注册等方式,实现相机服务的灵活配置与使用。 🧩 一、定义…

vue3组件式开发示例

1&#xff0c;定义组件&#xff08;根据实际调整提交分析结果方法&#xff09; <template><!-- 分析结果上传对话框组件 --><el-dialogv-model"uploadResultDialog":title"title":width"width":before-close"handleBeforeC…

基于arm linux的bluealsa开启蓝牙A2DP和SCO录音功能

bluealsa的软件架构 #mermaid-svg-ohITacCRHItwRR1t {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ohITacCRHItwRR1t .error-icon{fill:#552222;}#mermaid-svg-ohITacCRHItwRR1t .error-text{fill:#552222;stroke:…

网页后端开发(基础3--Springboot框架)

web的服务器资源&#xff1a; 静态资源&#xff1a;服务器上存储的不会改变的数据&#xff0c;通常不会根据用户的请求而变化。比如&#xff1a;HTML、CSS、JS、图片、视频等&#xff08;负责页面展示&#xff09; 动态资源&#xff1a;服务器端根据用户请求和其他数据…

ROS通过urdf_to_graphiz对urdf和xacro文件进行结构可视化

对机器人的urdf文件进行结构可视化&#xff1a; 举例命令如下&#xff1a; urdf_to_graphiz go2_description.urdf 输出 .gv 和 .pdf文件&#xff0c;打开 pdf文件如图&#xff1a;

基于Uniapp+PHP的教育培训系统开发指南:网校源码实战剖析

在线教育日益普及的今天&#xff0c;如何快速搭建一个功能完善、体验良好的教育培训系统&#xff0c;成为众多教育机构、培训企业、个体讲师关注的焦点。与其从零开发&#xff0c;不如基于成熟框架快速部署。而UniappPHP正是当前“低成本高效率”开发网校系统的黄金组合。 本文…

键盘 AK35I Pro V2 分析

文章目录 AK35I Pro V21. MCU SN32F299SN32F299 内存映射 2. Bootloader3. TFT 135x240 1.14inch4. 键盘5. Flash PY25Q128HA6. 蓝牙 CH582F7. 扩展板8. 电池 606090 3.7V 4000mAh AK35I Pro V2 AK35I Pro V2 测评视频 键盘外壳使用卡扣固定, 外壳没有螺丝, 将外框向外翘起, 用…

11. TypeScript 工具类型

TypeScript 提供了一系列内置的“工具类型”&#xff08;Utility Types&#xff09;&#xff0c;它们是对已有类型进行变换的便捷方式。通过这些工具类型&#xff0c;开发者可以更灵活、可维护地进行类型设计&#xff0c;避免重复定义类型逻辑。 工具类型的作用主要有&#xf…

Kafka性能调优全攻略:从JVM参数到系统优化

前言 在大数据处理领域&#xff0c;Kafka以其高吞吐、高并发的特性成为消息队列的首选。然而&#xff0c;随着业务规模的扩大和数据量的激增&#xff0c;若配置不当&#xff0c;Kafka的性能和稳定性会受到严重影响。其中&#xff0c;JVM参数的调整是优化Kafka性能的关键一环&a…

HarmonyOS 5 NPU支持哪些AI框架?

以下是HarmonyOS 5 NPU支持的AI框架及适配方案&#xff0c;结合关键技术和实测数据&#xff1a; 一、原生支持框架 MindSpore Lite‌ ‌核心特性‌&#xff1a; 原生适配昇腾达芬奇架构&#xff0c;支持INT8/FP16混合量化自动算子融合优化&#xff08;实测推理速度提升3.2倍…