深入理解javascript原型链

JavaScript 原型与原型链:深入理解面向对象编程 我们的目的是帮助大家深入理解 JavaScript 中的原型和原型链概念,以及它们在面向对象编程中的应用。我们会从基础概念讲起,逐步深入到实际代码示例,让大家不仅知道是什么,还能明白怎么用。本文首先会介绍相关的术语,然后通过有趣的故事引入原型和原型链的概念,接着详细解释核心概念及其之间的关系,给出原理和架构的示意图。之后会介绍核心算法原理和具体操作步骤,展示数学模型和公式,通过项目实战进行代码分析。再探讨实际应用场景,推荐相关工具和资源,分析未来发展趋势与挑战。 阅读详情

 在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环。今天我分享一下我对javascript原型和原型链的理解。

      一、对象等级划分

  我们认为在javascript任何值或变量都是对象,但是我还需要将javascript中的对象分为一下几个等级。

  首先Object是顶级公民,这个应该毋庸置疑,因为所有的对象都是间接或直接的通过它衍生的。Function是一等公民,下面会做解释。几个像String,Array,Date,Number,Boolean,Math等内建对象是二等公民。剩下的则都是低级公民。

  二、原型prototype

  首先prototype是一个属性,同时它本身也是一个对象。那么哪些是具有prototype这个属性呢?其实javascript中所有的函数都有prototype这个属性,反过来所有具有prototype的对象本身也是一个函数,没错就是一个函数。

  第一条我不再印证,主要看看第二条。大家都知道Object,Array,Date都有prototype,他们是函数吗?是的他们也是函数的一种,为什么这么说呢?我们在定义一个对象或者数组时,是不是可以这么做var o = new Object(),a = new Array()。学过java的人都知道new是用实例化一个对象的方法,但是我们都知道javascript中不存在真正的类的概念,所以只能用函数来模拟,那么既然可以有上面的做法也就印证了Object和Array也是特殊的函数。

  其实上面说到的几等公民基本都是函数的一种,除了Math这个工具对象外,应该没有见过这种new Math()这种写法吧!当然这种写法也是会报错的,所以在访问Math.prototype返回的也是undefined。

  三、__proto__和原型链

  __proto__是一个指针,它指的是构造它的对象的对象的prototype,听起来有的拗口。举个例子吧!

  

  如上面代码,o是Object的一个实例,所以o的__proto__指针指向构造o的Object的prototype。这样的意义在于o可以使用Object.prototype里面的方法,例如toString(),o在访问toString方法时,首先会在自身寻找,如果没有找到则会在__proto__也就是Object.prototype上面查找。

  可以说几乎所有的javascript对象都有__proto__这样一个指针包括Object,我们来看一看 

  

  其实a = 1就相当于a = new Number(1)。可以看到所有的内建对象以及Object的__proto__指向的都是一个匿名函数,也就可以认为它们其实也是function的一个实例,所以之前会说function是一等公民。

  那么原型链到底是什么呢?我们展开a.__proto__也就是Number.prototype对象,它是没有toString()的方法的,但是对于a来说它其实是可以调用toString的方法的,这就是原型链的作用。看下面代码

  

  看上面代码和结果,我们沿着a的__proto__一直访问会到达Object的prototype,也就是说a调用toString方法最终其实是访问Object.prototype的toString方法。那么a的原型链就是由Number.prototype和Object.prototype组成,当a访问一个方法或属性时,它会先在自身查找,然后再沿原型链找,找到则调用,没找到报错。为了印证这一点,我们在Number.prototype上面加一个toString的方法。

  

  可以看到a调用的是Number.prototype的toString方法,在找到之后就停止。在javascript中,几乎所有的对象的原型链的终点都是Object.prototype 

  总结

    原型:javascript中所有的函数对象都具有一个原型实例,所谓原型就是这个函数对象是由哪个函数对象的实例产生的。

原型链:字符串对象的原型指针,指向的是字符串函数的原型对象;因为字符串函数的原型对象也是个普通对象,因此也具备指针属性,因此可以一直使用指针关联下去;如此便形成了原型链。

  

JavaScript中的原型链:深入理解原型链的终点 当我们访问一个对象的属性或方法时,JavaScript会首先在对象本身查找,如果找不到,则会去原型对象中查找。如果还找不到,就会继续在原型对象的原型上查找,以此类推,直到找到属性或方法或者达到原型链的终点。原型链是JavaScript中一个重要的概念,它在对象之间提供了属性和方法的继承机制。了解原型链的终点,即原型链的尽头,对于理解JavaScript中的对象模型和继承非常关键。当我们访问一个对象的属性或方法时,JavaScript会沿着原型链向上查找,直到找到属性或方法或者达到原型链的终点。 阅读详情

相关推荐

SCCM实战指南:从零搭建企业级Windows自动化部署平台

本文提供了一份详细的SCCM实战指南,手把手教你从零搭建企业级Windows自动化部署平台。内容涵盖环境规划、AD架构扩展、SQL Server配置、SCCM主站点安装,以及最终实现操作系统镜像的自动化部署,旨在帮助IT管理员彻底告别手动装机,实现高效、规范的Windows设备批量管理。

weixin_29251337的博客 638

JavaScript原型链

1.原型链 1.1 原型链解释: (概念) 原型链指一些原型通过__proto__指针构成的链表,一个原型链可以为想共享原型链中数据的对象服务,用于实现JavaScript中的继承机制。 (原型链指针) 原型链中涉及到的指针: 每个对象都有一个__proto__指针来访问对象的原型 每个原型都是一个用于实现继承的对象,除了有__proto__指针之外,还有constructor指针指向构造函数 每个函数都是一个对象,除了有__proto__指针之外,还有prototype指针指向与之关联的原型对象

qq_37464878的博客 6692

[OrCad电路板设计系统].Orcad.Pspice.9.2下载安装

Orcad.Pspice.9.2详细下载安装图文步骤1 安装前准备工作1.1 下载安装包1.2 解压2 安装时步骤2.1 安装文件2.2 破解文件3 安装完成 1 安装前准备工作 1.1 下载安装包 打开百度网盘APP 链接:https://pan.baidu.com/s/1cMFxHUvuh5iEhFVT-lvciQ 提取码:7m65 1.2 解压 解压下载好的安装包 2 安装时步骤 2.1 安装文件 1.点击Setup安装文件,出现警告对话框,告诉你应该关闭所有病毒防火墙,点击确定 2.进入安装界面,

weixin_48924581的博客 1万+

超详细JS原型链(建议收藏)

JS原型链

weixin_48675760的博客 5567

2D激光slam数据集的下载与测试

参考博客: https://blog.youkuaiyun.com/qq_24894159/article/details/81265991 https://blog.youkuaiyun.com/fk1174/article/details/52673413#commentBox 数据集下载与生成 下载数据集 下载网址: http://ais.informatik.uni-freiburg.de/slamevaluation/datasets.php 进去网站后点你想下载的对应的"download log file" 然后你

老李的博客 4026

pikachu靶场: 暴力破解第四关(token防爆破)

Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个 Token 同时将此 Token 返回给客户端。此外,Token 是有时效的,一段时间之后或下一次请求时用户需要重新验证。

X_shiguang的博客 1720

JavaScript原型链(重要)

什么是原型链,什么是原型对象,什么是对象原型! 利用funcation关键字定义函数,也叫命名函数//定义,利用funcation命名函数functionfn(){}fn()利用字面量定义函数,也叫匿名函数//2.字面量定义匿名函数varfn1=function(){}fn1()由于声明函数方式的不同以及预解析的因素,导致1,2两种方式略微不同。...

抗争小青年的博客 2319

MuMu模拟器过检测实战:从硬件伪装到API欺骗的完整避坑指南

本文详细介绍了MuMu模拟器过检测的实战技术,从硬件伪装到API欺骗的全方位解决方案。通过修改CPU/GPU信息、内存分布、系统属性和行为模拟等关键技术,帮助用户有效绕过现代应用的模拟器检测机制,提升模拟器的隐蔽性和稳定性。

xxx12的博客 1409

js原型与原型链详解(万文总结,一文搞懂原型链!)

JavaScript中的原型和原型链:1,每个对象均存在隐式原型(__proto__),函数对象才有prototype属性2,__proto__存在的意义在于为原型链查找提供方向,原型链查找靠的是__proto__,而不是prototype3,函数对象的__proto__都指向Function.prototype4,每个对象都有一个隐式原型属性(__proto__),多个原型通过__proto__链接在一起形成的链式结构就是原型链😃。

Yi_qian的博客 3万+

绿标短网址app.10086.cn/xxxxx移动短网址缩短接口网址api调用php方式解析

绿标短网址app.10086.cn/xxxxx 移动网缩短接口网址api调用php方式解析 app.10086.cn是移动网站的接口,可以制作移动网等第三方官方网站域名的任意生成接口,由于是认证企业,可以再抖音 微信 qq等第三方渠道正常打开不拦截提示,第三方网址,头条文章等,效果非常号,这里记录下api接口,纯技术php生成,具体规则可以去抖音的开放平台去申请对应接口 。这里用我php模拟抓包获取方式 GET http://www.app10086cn.cn/?i=app.10068.cnHTTP/1.1

qq_20300095的博客 5911

Neo4j LLM知识图谱构建器使用教程

是一个开源应用程序,旨在将非结构化数据(如PDF、文档、文本、YouTube视频、网页等)转换为存储在Neo4j中的知识图谱。该项目利用大型语言模型(如OpenAI、Gemini等)从文本中提取节点、关系及其属性,并通过Langchain框架创建结构化的知识图谱。

u013250861的博客 542

javascript原型 原型链

1 一切都是对象 “一切都是对象”这句话的重点在于如何去理解“对象”这个概念。 ——当然,也不是所有的都是对象,值类型就不是对象。 首先咱们还是先看看javascript中一个常用的运算符——typeof <script type="text/javascript"> //1. 基本 // typeof返回数据类型的字符串表达 // <!-- // 1. 分类 // * 基本(值)类型 // * String: 任意字符串 // * Number

gqk01的博客 1364

InVEST模型 | HAbitat quality模块计算生境质量

 本文详细介绍使用InVEST模型中HAbitat quality模块计算生境质量,包含各个参数的含义、所需数据、数据处理以及需要各个参数注意的地方等过程。

地理空间科学的博客 1万+

【JS】深入理解JavaScript中的原型与原型链从入门到精通

在JavaScript中,每个对象都有一个原型(prototype)属性,这个属性指向另一个对象,我们称之为原型对象。原型对象包含了可以由特定类型的所有实例共享的属性和方法。当我们访问一个对象的属性或方法时,如果该对象本身没有这个属性,JavaScript引擎就会沿着原型链向上查找,直到找到该属性或到达原型链的末端(null)。

edward1110的博客 281

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

【JavaScript】深入理解JS中的原型与原型链

产生 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,将会带来全新的写作体验; 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示; 增加了

weixin_48989252的博客 403

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

【JavaScript知识总结二】全方位从5个方面深入理解JS中的原型和原型链

1. 所有的引用类型(数组,对象,函数),都是具有对象特性的,即可以自由扩展属性(除了null以外) // 1.引用类型可以扩展属性 var obj = {}; obj.a = 100; // 对象属性的扩展 var arr = []; arr.a = 100; // 数组属性的扩展 function fn() { ...

小牛itbull的博客 233

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

深入理解 JavaScript 中的原型和原型链

JavaScript 中的原型和原型链是一个至关重要的概念,同时也是许多前端开发者不熟悉的知识点。在这篇文章中,我将深入讲解这些概念,并通过实例来帮助读者更好地理解它们。

weixin_42429220的博客 834

深入理解JavaScript原型和原型链

1. 前言 关于JS原型和原型链我之前刚学js就有写过一篇学习笔记形式的博客,但前两天翻出来一看——什么鬼,这是我写的吗?自己都看不懂了,于是我重新整理思路,今天「前端料包」带来第四篇。 原型和原型链是js中的难点也是重点,有句话说,没理解透原型和原型链,就算还没有真正入门的前端。并且原型和原型链会是面试中必不可少的话题。看完这篇相信你能对原型和原型链会有个深刻的理解。如果觉得本文对你有所帮助请点亮左边的????,不甚感激???? 2. 函数对象 JS所有对象分为函数对象和普通对象。凡是通过

weixin_38655450的博客 306

js原型和原型链_「前端知识体系-JS相关」深入理解JavaScript原型和原型链

1.Javascript继承1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C']; } Parent.prototype.getName = function() { console.log(this.name); } function Child() { } Child.pr...

weixin_39851872的博客 142

【JavaScript由浅入深】深入理解原型与原型链

深入理解JavaScript中的原型及原型链

QDCXYXZ_的博客 425

JavaScript原型与原型链:深入理解面向对象的核心机制

javaScript中原型和原型链。__proto__、protoType

Yue 929

JavaScript深入理解之原型与原型链

来源 | http://cavszhouyou.top/写在前面原型和原型链一直都是 JavaScript 中很重要的概念,理解它们有助于我们理解预定义引用类型间的关系以及 JavaS...

web前端开发 285

Js原型链深入理解和总结之三

如果你读过之前的两篇文章,就会对原型链和原型方法有一定的理解。 下面这篇文章是对原型链最重要的总结 学习原型链是必须要有一个基本的概念:所有的对象都是Object的实例。 而所有的实例的__proto__都指向函数原型,即所有的实例和对象的__proto__属性都指向了Object的原型prototype属性 下面附上代码和图片进行理解: 这是我在学习期间一直很有用的图。那么就根据图上的指向我们来...

weixin_42714574的博客 313

深入理解javascript原型及原型链

原型及原型链是javascript中非常重要的东西,对看别人源码和自己设计框架和深入理解javascript这名语言特别有用.我们一起来深入学习原型和原型链。

xu_song的专栏 1799
上一篇: vue-resource promise兼容性问题
下一篇: JavaScript中getBoundingClientRect()方法详解
游世界
博客等级 码龄9年 2粉丝 16原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值