什么是原型、原型链?原型和原型链的作用(有图方便理解)

2023-10-30

原型:JS声明构造函数(用来实例化对象的函数)时,会在内存中创建一个对应的对象,这个对象就是原函数的原型。构造函数默认有一个prototype属性,prototype的值指向函数的原型。同时原型中也有一个constructor属性,constructor的值指向函数对象。
通过构造函数实例化出来的对象,并不具有prototype属性,其默认有一个__proto__属性,__proto__的值指向构造函数的原型。在原型对象上添加或修改的属性,在所有实例化出的对象上都可共享。

/*代码基本架构
1.每个函数function都有一个prototype,即显示原型(属性)
2.每个通过函数实例出来的对象都有一个__proto__,可称为隐式原型(属性)
3.对象的隐式原型的值为其对应构造函数的显示原型的值
*/

//显示原型与隐式原型
function Fn(){  // 内部语句:this.prototype = {}
	
}
//1.每个函数function 都有一个prototype 即显式原型(属性),默认指向一个空的object对象
console.log(Fn.prototype)
//2. 每个实例对象都有一个__proto__,可称为隐式原型(属性)
var fn = new Fn() //内部语句: this.__proto__ = Fn.prototype
console.log(fn.__proto__)
//3.对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype === fn.__proto__)

在这里插入图片描述

原型的作用:
1.数据共享 节约内存内存空间
2.实现继承

原型链:当在实例化的对象中访问一个属性时,首先会在该对象内部(自身属性)寻找,如找不到,则会向其__proto__指向的原型中寻找,如仍找不到,则继续向原型中__proto__指向的上级原型中寻找,直至找到或Object.prototype.__proto__为止(值为null),这种链状过程即为原型链。如下图所示好理解(根据代码参考下图)
原型链的作用:查找对象的属性(方法)

console.log(Object.prototype.__proto__) //浏览器本身创建了一个Object
function Fn() {
	this.test1 = function(){
		console.log('test1()')
	}
}
Fn.prototype.test2 = function(){
	console.log('test2()')
}

var fn = new Fn()

fn.test1()
fn.test2()
console.log(fn.toString())

在这里插入图片描述

原型链的源头是Object!所以万物皆对象呀!

原型链面试题


var A = function() {}

A.prototype.n = 1

var b = new A()

A.prototype = {
  n: 2,
  m: 3
}

var  c = new A()

console.log(b.n, b.m, c.n, c.m) // 1 undefined 2 3

```html
var F = function() {}

Object.prototype.a = function() {
  console.log('a()')
}

Function.prototype.b = function() {
  console.log('b()')
}

var f = new F()

f.a() // a()
f.b() // b is not a function(报错)
F.a() // a()
F.b() // b()

特别注意:

Object.prototype.constructor.proto === Function.prototype // true

Function.prototype.proto === Object.prototype // true

Object.prototype.proto === null // true

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

什么是原型、原型链?原型和原型链的作用(有图方便理解) 的相关文章

  • 滚动在 chrome 中的 svg 异物内不起作用

    我在 svg 异物中有 div 带有溢出 auto 滚动仅适用于鼠标滚轮 无法拖动栏 它适用于 Firefox 但不适用于 chrome safari 如果 svg g 元素上没有转换 它就可以工作 参见小提琴 http jsfiddle
  • 如何使用 jest 测试 unhandledRejection / uncaughtException 处理程序

    我有处理程序unhandledRejections and uncaughtExceptions bin js unhandledRejection uncaughtException forEach event gt process on
  • 有没有比 setTimeout 更准确的方法来创建 Javascript 计时器?

    一直困扰我的是事情的不可预测性setTimeout Javascript 中的方法是 根据我的经验 计时器在很多情况下都非常不准确 我所说的不准确是指实际延迟时间似乎或多或少有 250 500 毫秒的差异 尽管这并不是一个很长的时间 但当使
  • 如何使用Vue3中的ref访问父组件中的子组件方法?

    我正在尝试使用 vue3 和 ref 方法访问父组件中的子方法 但它返回一个错误 未捕获的类型错误 addNewPaper value savePaper 不是函数 下面是我的代码 请指导我哪里错了 子组件
  • 将 C# 3D 数组移植到 JS 3D 数组

    我开发了一个 C 库 它在 3 个项目中使用 这些项目在特定的代码段中中继 不过 我仍然需要在 javascript 中使用该代码 所以将其导出 问题是 我认为我无法复制同样的逻辑 比如这个问题我想了好几天也没有得出答案 在 C 库中 我有
  • 获得焦点时如何移动文本框视口?

    我有一个文本框 其中可能包含大于文本框大小的字符串 当我打字时 文本框 视口 总是移动以显示我输入的最后一个字符 例如 当您在 SO 问题中写下一个非常大的标题时 A 问题是 如果文本框失去焦点 当它再次聚焦时 视口总是设置在文本的开头 而
  • JQuery:获取单选按钮值

    我有以下 HTML HTML
  • 使用 jquery UI 调整大小的分屏 div

    我心中有一个设计 涉及 html 中的拆分面板视图 类似于 winforms 拆分面板 我一直在尝试jQuery UI 可调整大小 http jqueryui com demos resizable我喜欢这个功能 我只是似乎无法协调两者的大
  • Javascript If 语句的语义是什么

    我一直认为 if 语句本质上比较它的论点类似于 true 然而 Firebug 中的以下实验证实了我最担心的事情 在编写 Javascript 15 年之后 我仍然不知道 WTF 发生了什么 gt gt gt true false gt g
  • 是否可以加载本地版本的 JavaScript 文件而不是服务器版本?

    只是有一个简单的问题要抛出 看看是否有解决方案 假设我无法访问服务器 我加载一个网页 发现他们有一个从子文件夹加载的 Javascript 文件 比方说 scripts js some js 现在 我想在本地对此文件进行更改 并针对整个站点
  • Node.js 中的 SetTimeout 问题

    我有以下代码 它在 Chrome V8 下运行良好 但在节点内失败 var id id setTimeout TimeoutHandler 10 console log SET function TimeoutHandler clearTi
  • 使用 javascript/jquery 检查 .css 样式表的名称

    我正在尝试为论坛制作一个小 chrome 扩展 但我只希望它在论坛的某个区域中工作 问题是我不能只做 matches subforum 因为该论坛中的线程无法通过 URL 区分它们所在的子论坛 subforum 有自己的 css 样式表 所
  • 缩放对象上的弹跳动画

    拥有对象比例 然后在返回到原始比例因子之前以该比例因子执行弹跳动画的最佳方法是什么 我意识到我可以做一些事情 比如将其缩放到 2 2 然后 1 8 然后 2 0 但我正在寻找一种方法 您只需在比例因子上执行弹跳动画 因为我的比例因子会改变
  • 将 HTML 编辑器的内容保存为桌面上的 HTML 文件

    我想通过单击按钮来保存 TinyMce HTML 编辑器的内容 TinyMce 是本地安装的 我在 Chrome 中使用它 我见过这个answer https stackoverflow com a 30740104 3154274然后on
  • d3 饼图中的文本被路径覆盖

    我正在尝试按照 d3 的饼图示例进行操作http bl ocks org mbostock 3887235 http bl ocks org mbostock 3887235 我的代码的最小示例 const container graph
  • Internet Explorer 10,最大 div 大小为 1.533.917 像素

    我需要制作一个非常大的 div 以百万像素为单位 搜索我发现这个线程证明 IE 可以管理最多 10 000 000 px 确定最大可能的 DIV 高度 https stackoverflow com questions 7719273 de
  • SVG 沿圆弧添加文本

    我正在尝试绘制 SVG 径向饼图 如下所述 色卡 https stackoverflow com a 18210763 1395178 现在我尝试将文本与圆弧一起添加到每个切片 我试图展示Text 1具有与 M 和 A 值完全相同的 x y
  • 使用 JavaScript 自动提交表单

  • 在不调用“then”的情况下解决 Promise

    我有这段代码 它是我为一个名为 Poolio 的 NPM 模块编写的小型 API 的一部分 对于那些支持错误优先回调和承诺的人来说 我遇到的问题似乎是一个常见问题 我们如何在支持两者的同时保持一致的 API 和 API 的一致返回值 例如
  • 如何在没有消息时隐藏 Bootstrap 警报框

    我用 Bootstrap 做了一个简单的警报框 如下所示 div class alertBox span class alert alert info bag session username span div When there is

随机推荐

  • GD32F103 USB 虚拟U盘实验一(内部Flash)

    这个直接抄官网的 官网是96M这里我改成72M 要注意把 rcu usb clock config RCU CKUSB CKPLL DIV1 5 这里分频 use HXTAL XD series CK HXTAL 8M CL series
  • 如何在Vim中更改颜色和主题

    大家好 我是良许 Vim是我们在Linux中非常常用的一款文本编辑器 Vim 是一款免费 开源的文本编辑器 它的功能和许多其他的文本编辑器大致相同 比如 Sublime 和 Notepad Vim既可以在命令行中执行 也可以在图形界面中操作
  • 解决:在python+selenium账号脚本登陆时,使用qq账号密码登陆百度账号出现的问题

    原始代码 def test loginBtn self 定位并点击登录按钮 log info 定位并点击登录按钮 self driver find element by xpath id u1 a 7 click log info 点击登录
  • QT设置标签显示位置

    QT设置标签显示位置 首先在mainwindow h文件的私有对象下声明标签 定义标签 QLabel chanel1 实现函数 关于图像显示的控件 tr里面可写可不写 chanel1 new QLabel tr chanel1 gt set
  • 故障树定性分析一定要严谨

    故障树分析主要分为定性分析和定量分析两大部分 定量分析的前提是需要明确各底事件的分布函数 故障率或故障发生概率等相关信息 而这些信息往往很难准确获取 定性分析却没有这些限制 因此应用范围更为广泛 定性分析通常包括两个部分 最小割集提取以及结
  • Android插件化资源的使用及动态加载 附demo

    http blog csdn net yulong0809 article details 59489396
  • 1054 求平均值 (20 分)(测试点3分析)

    本题的基本要求非常简单 给定 N 个实数 计算它们的平均值 但复杂的是有些输入数据可能是非法的 一个 合法 的输入是 1000 1000 区间内的实数 并且最多精确到小数点后 2 位 当你计算平均值的时候 不能把那些非法的数据算在内 输入格
  • 短信发送(java版)

    如果通过阿里云短信服务产品发送短信 需要做以下操作 1 登录阿里云 开启短信服务 2 创建短信api模板及短信内容类型 定义短信内容的时候如果有变量 则使用如 code 的形式 如果使用其他内容则查看产品文档 3 获取阿里云ACCESS I
  • DOPI 海思入门级开发板Hi3516EV200 开发板

    自我介绍 大家好 我是DOPI 音译 独派 中文名 行动派 叫我 独派 行动派都可以 很长一段时间里 海思的芯片 都只出现在大厂的产品里 很少出现在开源的项目中 经过DOPI的努力 现在海思的芯片 也可以开源 可以可以用在智能家电 智能门锁
  • SpringBoot 读取配置文件的值为 Infinity

    1 配置信息 appid 6E212341234 2 获取方式 Value admin private String admin 获取到结果 Infinity 3 修改方案 配置信息上加 号 appid 6E212341234 yml中使用
  • 国内远程控制市场竞争激烈 TeamViewer一马当先

    近年来 疫情的反复给很多行业带来了负面影响 但是远程控制软件却因为远程办公的流行而备受众多企业的青睐 远程控制2022年市场也将高达30亿元 在此大好形势下 多款远程控制软件纷纷争夺国内市场 其中表现非常出色的当属TeamViewer 据埃
  • 卷(三)C++___二刷

    Chapter 13 Basic Object oriented Programming 13 1 Welcome to object oriented programming Object oriented programming OOP
  • 您不是订单管理的定向开发者_全面升级投放和营销能力 华为应用市场商业推广助力开发者高效增长...

    9月10日 2020华为开发者大会在东莞松山湖盛大开幕 9月11日下午 在 共舟前行 创新未来 华为应用市场商业推广分论坛上 华为应用市场商业推广产品部部长与现场开发者及合作伙伴分享过去半年取得的成绩 并共同探讨了合作伙伴如何加速获量成长以
  • DNS部署与安全

    1 DNS Domain Name Service 域名服务 作用 为客户机提供域名解析服务器 2 域名组成 2 1 域名组成概述 如 www sina com cn 是一个域名 从严格意义讲 sina com cn 才被称为域名 全球唯一
  • GBDT 梯度提升树(Gradient Boosting Decision Tree)(万字全解)

    目录 一 相关基础知识 二 调用sklearn实现GBDT 1 梯度提升回归树 2 梯度提升分类树 三 参数 属性详解 1 迭代过程涉及的参数 1 n estimators 迭代次数 2 learning rate 学习率参数 3 init
  • Simon Video Course Task 2

    Lesson 01 The tasks This an IELTS training course training has five steps Understand the task what we need to do Break t
  • python硬币识别_OpenCV硬币检测和自动结果检查

    我正在做一个硬币识别项目 我遇到的第一件事就是从图像中正确提取硬币 即使是从非常简单的图像中 有很多很好的硬币检测工作方法 但我认为所有这些都需要人工检查后应用 我测试了其中两种 HoughCircles和threshold及其后的find
  • 智能交通系统调研

    背景 随着微电子技术系统 MEMS 和低功耗的信息交互技术的快速发展 如今已经能够部署大规模无线传感器网络 无线传感器网络是在需要被监视的地点附近或是内部随机地 密集地部署大量的无线传感器结点 传感器网络的应用是多种多样的 不同于传统的无线
  • linux怎么将命令变成汉语,在Linux系统中把firefox火狐游览器转成中文语言的两种方法...

    如果你的Linux操作系统中firefox火狐游览器不是中文语言 你现在要把它们改成中文语言 有两种方法可以实现 其中第二种方法适合所有的Linux发行版 第一种方法 采用系统命令处理 如果所用的Linux系统是Ubuntu Deepin等
  • 什么是原型、原型链?原型和原型链的作用(有图方便理解)

    原型 JS声明构造函数 用来实例化对象的函数 时 会在内存中创建一个对应的对象 这个对象就是原函数的原型 构造函数默认有一个prototype属性 prototype的值指向函数的原型 同时原型中也有一个constructor属性 cons