JS中的原型与原型链

ops/2024/12/24 9:46:57/

1. 基本概念

  • 原型(Prototype):每个对象都有一个内部属性 [[Prototype]],通常通过 __proto__ 访问(非标准,但广泛支持)。

  • 原型链(Prototype Chain):对象通过原型链查找属性和方法。如果对象本身没有某个属性或方法,它会沿着原型链向上查找,直到找到或到达原型链的顶端(null)。


2. 原型的作用

  • 实现继承:通过原型链,对象可以继承其原型对象的属性和方法。

  • 共享属性和方法:原型允许多个对象共享相同的属性和方法,从而节省内

 对象中的原型

每个对象都有一个内部属性 [[Prototype]],通常通过 __proto__ 访问(非标准,但广泛支持)

我们现在创建按一个User函数来理解原型原型的概念

javascript">function User(name, age) {this.name = name;this.age = age;this.sayHello = function() {console.log('我是' + this.name)}
}const user1 = new User('小王', 18)
user1.sayHello() // 我是小王
const user2 = new User('小高', 20)
user1.sayHello() // 我是小高

这里面创建了一个User构造函数,每个对象里面都有一个sayHello方法,sayHello 方法是完全一样的,没必要为每个用户单独生成一个; 所以我们可以改造一下,把方法挂载到User的原型上,当然也可以增加一个性别的属性,假设他们的性别都是一样的

javascript">function User(name, age) {this.name = name;this.age = age;
}User.prototype.sayHello = function() {console.log('我是', this.name + '我的性别是' + this.sex)
}
User.prototype.sex = '男'const user1 = new User('小王', 18)
user1.sayHello() // 我是小王
const user2 = new User('小高', 20)
user1.sayHello() // 我是小高

这个就是原型用来共享数据!

什么是原型链?

重要概念:所有的对象都是通过new创建的,{} 和 [] 则是语法糖, 看下面的代码👇

javascript">var u2 = { // 对象 u2 通过 new Object 创建firstName: '莫',lastName: '妮卡'
}
// 等效于
var u2 = new Object(); 
u2.firstName = '莫';
u2.lastName = '妮卡';

上面的代码原型链如下👇

所有的对象都是通过Object创建的 ,所以当前两张图可以合并

上面的图片中从 u1->user原型->Object原型; 这就被称为原型链!

Function 中的原型链

javascript">function User(name) {this.name = name
}
const user1 = new User('小王')

上面的代码原型链如下

完整的图例如下👇


http://www.ppmy.cn/ops/144534.html

相关文章

ShardingSphere分库分表

ShardingSphere 高性能架构模式 读写分离架构: 基本原理是将数据库读写操作分散到不同的节点上,主库负责处理事务性的增删改操作,从库负责处理查询操作。避免由数据更新导致的行锁,来提升性能。 一主一从:可以将查…

【数据安全】如何保证其安全

数据安全风险 数字经济时代,数据已成为重要的生产要素。智慧城市、智慧政务的建设,正以数据为核心,推动城市管理的智能化和公共服务的优化。然而,公共数据开放共享与隐私保护之间的矛盾日益凸显,如何在确保数据安全的…

Python OCR 文字识别

一.引言 文字识别,也称为光学字符识别(Optical Character Recognition, OCR),是一种将不同形式的文档(如扫描的纸质文档、PDF文件或数字相机拍摄的图片)中的文字转换成可编辑和可搜索的数据的技术。随着技…

Kubernates

kubernates是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器化的应用简单并且高效(powerful),Kubernetes提供了应用部署,规划,更新,维护的一种机制。 架构…

《开启微服务之旅:Spring Boot Web开发举例》(一)

Springboot数据层开发 数据源自动管理 引入jdbc的依赖和springboot的应用场景 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency> …

2024年图像处理、多媒体技术与机器学习

重要信息 官网&#xff1a;www.ipmml.org 时间&#xff1a;2024年12月27-29日 地点&#xff1a;中国-大理 简介 2024年图像处理、多媒体技术与机器学习&#xff08;CIPMT 2024&#xff09;将于2024年12月27-29日于中国大理召开。将围绕图像处理与多媒体技术、机器学习等在…

Could not resolve host: github.com

问题 git push的时候出现 Could not resolve host: github.com 解决方法 Windows C:\Windows\System32\drivers\etc 找到hosts&#xff0c;添加140.82.113.3 github.com Mac vi /etc/hosts 添加140.82.113.3 github.com

【数据结构练习题】栈与队列

栈与队列 选择题括号匹配逆波兰表达式求值出栈入栈次序匹配最小栈设计循环队列面试题1. 用队列实现栈。[OJ链接](https://leetcode.cn/problems/implement-stack-using-queues/solutions/)2. 用栈实现队列。[OJ链接](https://leetcode.cn/problems/implement-queue-using-stack…