彻底搞懂JavaScript原型和原型链

news2025/1/12 7:55:22

基于原型编程

在面向对象的编程语言中,类和对象的关系是铸模和铸件的关系,对象总是从类创建而来,比如Java中,必须先创建类再基于类实例化对象。
而在基于原型编程的思想中,类并不是必须的,对象都是通过克隆另外一个对象而来,这个被克隆的对象就是原型对象。
基于原型编程的语言通常遵循下面的规则:

  • 所有的数据都是对象
  • 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它
  • 无法自己直接创建一个对象,对象都是克隆产生,必须有一个根对象,然后克隆它才可以创建对象
  • 对象会记住它的原型
  • 如果对象无法响应某个请求,它会把这个请求委托给自己的原型

函数和对象

JavaScript是基于原型的语言,但JavaScript并非严格遵循原型编程的第一条规则,其中基本类型undefined、number、string、boolean就不是对象,其模仿Java,分为了基本类型和对象类型,当然和Java一样,基本类型可以使用包装的形式变为对象。
这里先探讨一个问题,有助于后面理解原型和原型链,那就是“所有的数据都是对象,函数也是对象“,虽然函数是对象,但是函数拥有很多普通对象不具备的特性:

  1. 可执行性:函数可以被调用执行
  2. 闭包:函数可以创建闭包
  3. 构造函数:函数可以作为构造函数,去创建对象实例,理论上,除了 Object.create 创建的对象,都是通过构造函数创建的对象。
  4. 原型对象属性:除了箭头函数,每个函数都有一个 prototype 属性,它是一个对象,用于存储通过该构造函数创建的所有实例的共享属性和方法。

JavaScript原型

从上面可以得知,函数都有 prototype 属性,称之为原型,也称为原型对象,原型对象里面可以存放属性和方法,共享给实例对象使用,用于实现继承效果。
这里的函数指的是构造函数,即可以通过new创建对象的函数,在JavaScript中普通函数都可以是构造函数,除了箭头函数。

箭头函数没有 prototype 属性是为了保持它们的设计简洁性,避免与原型链相关的复杂性和潜在问题。箭头函数同时不能使用new实例化对象。如果你需要定义一个构造器函数,应该使用普通函数而不是箭头函数。

举例说明:

const arr = new Array(1, 2, 3)
arr.reverse()
arr.sort()

在上面的代码中 Array 就是一个构造函数,reverse和sort都是 Array.prototype 原型对象上的函数。
这里有个问题,为何要将这些方法放在 prototype 原型属性上,而不是放在构造函数内部呢?
我们来看下面的代码:

function Person() {
  this.getName = function () {
    console.log('person')
  }
}
Person.prototype.getProtoName = function () {
  console.log('proto person')
}
const person = new Person()
const person1 = new Person()

console.log(person.getName === person1.getName) // false
console.log(person.getProtoName === person1.getProtoName) // true

很明显,虽然在实例化对象上都可以调用这些方法,但两者有本质的不同,将方法放在 prototype 原型对象上,之后实例化的对象使用的都是同一个方法,类似于Java的类方法,而构造函数内的方法,则会重新创建,也就是实例对象方法。

JavaScript原型链

了解完原型之后,再来看原型链就非常简单了。

  1. 对象可以调用其构造函数的 prototype 原型对象的属性和方法
  2. 原型对象也是对象,同样也可以调用其构造函数的prototype原型对象的属性和方法
  3. 一层一层的形成一条链路就是原型链

如图所示:
在这里插入图片描述

解读:

  1. 在浏览器中,通常使用对象的 __proto__ 即可找到对象的原型对象,每个对象都有 __proto__ 属性(还是要去除Object.create创建的),用于指向它的原型对象。
  2. 前面基于原型编程有一个规则是,必须有一个根对象,JavaScript中根对象是:Object.prototype,其是一个空对象。

原型链经典图片

最后结合上面的内容,来看看下面的经典原型链图:
在这里插入图片描述

从上图可以看出左边是实例对象,中间是构造函数,右边是原型对象,图中还包含了一些其它内容:
函数是一个函数,同时也是一个对象:
构造函数作为一个函数时,拥有原型对象属性 prototype
同时函数也是一个对象,函数都是由构造函数 Function 构造出来的,包括 Function 函数本身,可以看上图中 function Foo()function Object()function Function()__proto__ 都是指向 Funtion.prototype,这是函数比较特殊的一点。
这个地方有点绕,再理一下,函数的 prototype 属性是这个函数自己的属性,而函数的 __proto__ 指向的是其构造函数的原型对象,可以理解为父级的属性,两者是不同的。

总结

  1. JavaScript是基于原型编程,创建对象是通过克隆对象的形式,不是通过类创建。
  2. 函数都拥有 prototype 原型属性,实例化对象的 __proto__ 属性指向这个原型属性,对象可以直接调用原型对象的方法和属性,不用写 __proto__ 再调用,两者效果一致。
  3. 对象的 __proto__ 指向构造函数的 prototype,构造函数的 prototype 同样是对象,其 __proto__ 指向上一层原型对象,直到 Object.prototype,形成原型链。

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

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

相关文章

Unity数据持久化2——XML

简介: 基础知识 XML文件格式 XML基本语法 XML属性 练习: C#读取存储XML XML文件存放位置 读取XML文件 练习: 存储修改XML文件 练习: 总结 实践小项目 必备知识点 必备知识点——C#中XML序列化 必备知识点——C#中XML反序列化 必备…

ubuntu设置root开机登录,允许root用户ssh远程登录

ubuntu与centos系统不同,默认root开机不能登录。 1、输入一下命令创建root密码,根据提示输入新密码 sudo passwd root 2、打开gdm-autologin文件,将auth required pam_succeed_if.so user ! root quiet_success这行注释掉,这行就…

【python】python社交交友平台系统设计与实现(源码+数据库)【独一无二】

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

python安装路径可以更改吗

Python3.5默认安装路径是当前用户的 AppData\.. 下 现在安装过程中默认是install just for me,这个会把python默认安装到AppData文件夹中,如果选了install for all users,就会默认安装到C盘根目录了。 python3.5 安装: 输入官网…

机器学习入门-sklearn

概述 机器学习定义是什么? 官方定义: 机器学习是人工智能核心,是使计算机具有智能的根本途径。(地位) 机器学习专门研究计算机怎样模拟或实现人类的学习行为(研究内容),以获取新的…

PyCharm控制台中文乱码,输出�¹���

问题:很离谱的一件事就是python控制台可以正常的输出中文,但在pycharm控制台中就是乱码。 解决方法:之前看他们一些文章说设置pycharm的文件编码,不管怎么改都没用。 只是设置第一张图中的内容无效 好了,打完收工~

uview1.0 u-form表单回显校验不通过

提交到后端的数据,回显后不做任何修改无法通过表单校验 原因,u-form表单校验的类型默认为string,但是后端返回的是integer类型,导致无法通过校验 解决,既然后端返回的是整数形,那么我们就将校验规则的type…

有没有软件可以监控电脑软件?监控电脑软件的系统

有没有软件可以监控电脑软件?监控电脑软件的系统 电脑软件如果不合规也会给企业带来安全危害,比如盗版软件,比如游戏软件耽误工作等,所以需要对电脑软件的监控。下面我将详细介绍几款代表性的电脑监控软件及其功能,帮…

vscode添加代办相关插件,提高开发效率

这里写目录标题 前言插件添加添加TODO Highlight安装TODO Highlight在项目中自定义需要高亮显示的关键字 TODO Tree安装TODO Tree插件 单行注释快捷键 前言 在前端开发中,我们经常会遇到一些未完成、有问题或需要修复的部分,但又暂时未完成或未确定如何处…

树的非递归遍历(层序)

层序是采用队列的方式来遍历的 就比如说上面这颗树 他层序的就是:1 24 356 void LevelOrder(BTNode* root) {Que q;QueueInit(&q);if (root){QueuePush(&q, root);}while (!QueueEmpty(&q)){BTNode* front QueueFront(&q);QueuePop(&q);print…

Flutter Text导致A RenderFlex overflowed by xxx pixels on the right.

使用Row用来展示两个Text的时候页面出现如下异常,提示"A RenderFlex overflowed by xxx pixels on the right." The following assertion was thrown during layout: A RenderFlex overflowed by 4.8 pixels on the right.The relevant error-causing widget was:…

存储+调优:存储-Cloud

存储调优:存储-Cloud Master Server 配置: IP192.168.1.254 useradd mfs tar zxf mfs-1.6.11.tar.gz.gz cd mfs-1.6.11 ./configure --prefix/usr --sysconfdir/etc --localstatedir/var/lib --with-default-usermfs --with-default-groupmfs --disabl…

机器学习之决策树算法

使用决策树训练红酒数据集 完整代码: import numpy as np import matplotlib.pyplot as plt from matplotlib.colors import ListedColormap from sklearn import tree, datasets from sklearn.model_selection import train_test_split# 准备数据,这里…

安装pip install xmind2image失败,4种安装pip install xmind2image在temunx高级终端的失败,却又意外发现

~ $ ~ $ ![在这里插入图片描述](https://img-blog.csdnimg.cn/b59cbb49c3e14a3bbec5675164a14009.png)#!/bin/bash # 创建一个新的空白XMind文件 xmind_dir ( m k t e m p − d ) x m i n d f i l e n a m e ′ t e s t . x m i n d ′ x m i n d p a t h " (mktemp -d…

github设置项目分类

https://www.php.cn/faq/541957.html https://docs.github.com/zh/repositories/working-with-files/managing-files/creating-new-files

在数据中心网络中隔离大象流

1000 条短突发中混入几条大象流将严重影响短突发 p99 latency,造成抖动。这个我在 隔离网络流以优化网络 论证过了,还有另一种更直观的理解方式: 规模差异越大,算术均值越偏离中位数,即算术均值的分位数越高。 可以…

web4.0-元宇宙虚拟现实

互联网一直在不断演变和改变我们的生活方式,从Web逐渐 1.0时代的静态网页到Web 2.0时代的社会性和内容制作,再从Web逐渐 在3.0阶段,互联网发展一直推动着大家时代的发展。如今,大家正站在互联网演化的新起点上,迈入Web…

两步将 CentOS 6.0 原地升级并迁移至 RHEL 7.9

《OpenShift / RHEL / DevSecOps 汇总目录》 说明 本文介绍如何将一个 CentOS 6.0 的系统升级并转换迁移到 RHEL 7.9。 本文是《在离线环境中将 CentOS 7.X 原地升级并迁移至 RHEL 7.9》阶进篇。 所有被测软件的验证操作可参见上述前文中对应章节的说明。 准备 CentOS 6.…

紫光同创PGL22G开发板|盘古22K开发板,国产FPGA开发板,接口丰富

盘古22K开发板是基于紫光同创Logos系列PGL22G芯片设计的一款FPGA开发板,全面实现国产化方案,板载资源丰富,高容量、高带宽,外围接口丰富,不仅适用于高校教学,还可以用于实验项目、项目开发,一板…

爆火!开源多模态大模型在手机端进行本地部署!

节前,我们组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型& AIGC 技术趋势、大模型& AIGC 落地项目经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了…