深度理解原型链

[回顾]从原型链视角解读Vue底层实现Vue VueCompoent VM VC关系 链式结构:通过__proto__形成的对象间引用关系继承本质:属性和方法的共享与覆盖机制设计思想:通过原型实现高效的内存利用和代码复用建议通过绘图辅助理解(如绘制People构造函数与person实例的原型链关系图),并尝试手写继承实现以加深印象。掌握原型链不仅有助于通过面试,更是理解JavaScript设计哲学的关键。本文综合了多篇文献的核心观点,通过代码示例与理论结合的方式,系统性地解读了原型链的机制与应用。建议读者配合Chrome开发者工具的Console面板进行原型链可视化验证,以强化理解。 阅读详情

1.什么是prototype,constructor,__proto__ 

prototype

prototype是构造函数的属性,指的就是构造函数的原型,在生成实例的时候,js会根据构造函数的prototype属性将该属性下的对象生成为父类,

注意,只有构造函数这个属性才有这种效果哦~如果一个构造函数没有指定该属性,那么该属性下的__proto__会默认的指向原生Object的原型对象,该属性会变成一个对象,其中constructor属性指向本身。

​constructor

   constructor,如果通俗的理解,可以理解成原型对象的构造函数,当把一个对象(对象字面量)赋给一个构造函数的原型,constructor 会被复写,如果没有进行prototype的操作的话,constructor是函数声明时指定的,指定为本身:

例如:

function A() {}  

         则 A.prototype.constructor === A; 但是这个属性往往是不准确的:

        function A() {}

         function B() {}

        B.prototype = new A();

​        var b = new B();

        b.constructor; // A

 上面的代码,按照constructor的含义,b的constructor应该指向B,但是确指向了A,原因如下

    A没有进行prototype操作,所以其constructor指向本身; B.prototype = new A();  

    之后B.prototype.constructor === A;         B.prototype被复写为A的实例,B.prototype.constructor === A;  

   而b是B的实例则b.constructor === A;

如果想要实现继承,一般要进行constructor修复,即:  B.prototype = new A();  B.prototype.constructor = B;

__proto__

​可以这么说,js的原型链就是通过这个属性串联起来的,__proto__属性指向他的父类,在调用一个对象的属性或者方法的时候就是通过__proto__这一属性指向的对象一层一层的向上查找的。上面的一句:在生成实例的时候,js会根据构造函数的prototype属性将该属性下的对象生成为父类,在这里可以改为,在生成实例的时候,js会根据构造函数的prototype属性将该属性下的对象引用到实例的__proto__属性下。

​2.什么是原型链

​我们首先来说说继承,继承是面向对象语言的重要机制,通俗地讲就是子类可以拥有父类的方法和属性,js的原型链实际上也是一种继承,在ECMAScript标准中,只支持实现继承,而其实现实现继承就是主要依靠于原型链实现的。

 那么,我们再来说说原型,原型其实就是上述所说的继承中的父类。

  这样,原型链 显而易见的 可以理解为,利用原型串起一个继承链,让一个引用类型继承另一个引用类型的属性和方法,再以此类推下去.

3.​构造函数,原型,与实例的关系:

​这三者的关系用一句话概括为,每个构造函数都有一个原型,当new 一个构造函数的时候就会生成一个原型链上携带该构造函数的原型的实例。

4.原型链的生成过程:

function parent(){ 

     this.a = "world"; 

     this.b = "world"; 

} 

parent.prototype = { 

   a : "aaa", 

   b : "bbb", 

  c : "!" 

  }

 function temp(){

  this.a = "hello";

 }

temp.prototype = new parent();

var child = new temp();

console.log(child.a +" " + child.b+child.c);//hello world!​​​​​​

上面的代码运行结果就为 : “hello world!”生成的原型链即是

child(temp的实例) > __proto__ > temp.prototype(parent的实例) > __proto_ >parent.prototype > __proto__ > Object.prototype >__proto__ > null

​5.常用函数

function extend(child, parent) {​

      function temp() {

           this.constructor = child;

​      }

     temp.prototype = parent.prototype;

     child.prototype = new temp();

​}

extend函数 两个参数都为构造函数,目的是让一个构造函数(子类)继承另一个构造函数(父类)的原型,并且不调用父类的构造函数(有时候构造函数会需要一些参数或者做一些事情破坏了原型链),这个方法可以用来生成想要的原型链哦。​

JavaScript原型链与继承:从三角关系到底层原理到面试考点 在JavaScript的面向对象体系中,原型链是理解对象属性查找、继承机制和构造函数行为的基础。每个对象都通过__proto__链接到其原型对象,而函数则通过prototype为实例提供共享方法,这一设计决定了JS中属性访问和复用的底层逻辑。掌握原型链,不仅能解释instanceof的判定原理,还能在工程实践中避免原型污染、正确实现继承方案。无论是手写new、组合继承,还是分析class语法糖背后的寄生组合式继承,都离不开对原型链的透彻理解。对于前端开发者而言,原型链也是面试中高频考察的核心知识点,从基础概 阅读详情

相关推荐

JavaScript技巧:深入理解原型链

在上面的示例中,我们定义了一个父类Animal,并在其原型上定义了一个sayName方法。接下来,我们将子类的原型设置为父类的实例,这样子类就能够继承父类的属性和方法。在JavaScript中,原型链是一个关键的概念,它允许对象继承属性和方法。在上面的示例中,我们创建了一个名为Person的构造函数,并在其原型上定义了一个sayHello方法。在继承中,当我们设置子类的原型为父类的实例时,需要注意保留子类的构造函数。同时,我们强调了在使用原型链时需要注意的一些事项,以避免潜在的问题。3.4 原型链的深度。

CyberOI的博客 84

原型与原型链详解(带图方便理解)

每一个类(构造函数)都有一个显示原型prototype(本质就是个对象)01 类:是创建对象实例的模板 本质上讲类是个函数 (例如Array object String )001 构造函数 :用new来执行的函数02 实例:就是由类创建的对象 本质上就是对象例如 [1,2,3] {name : "mumu " } , “abc”以上就是面试经常会问到的内容啦,希望对你们有用哈。

m0_55734030的博客 1万+

研发工作量科学量化评估模型:从多维系数到等级落地指南

摘要:本文提出了一套基于多维系数的科学量化评估模型,用于精准评估软件开发工作量。该模型从需求复杂度、技术难度、质量要求和依赖风险四个核心维度进行量化评估,通过系数乘积计算综合工作量。文章详细说明了各维度的系数区间划分标准,并演示了从基础工作量估算到综合系数计算的具体步骤。该模型通过结构化评估过程,将主观经验转化为客观量化指标,帮助团队提高工作量评估的准确性,增强项目交付的可预测性。其价值在于使评估过程透明化、结构化和可追溯,从而减少项目延期风险,优化资源规划。

友莘居士的博客 1681

原型及原型链详解

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。这就是所谓的原型链的基本概念。——摘自《javascript高级程序设计》

dyy_csdn的博客 3万+

华为交换机与思科/华三设备LACP对接实战:手把手教你配置链路聚合

本文详细解析了华为交换机与思科、华三设备间的LACP链路聚合配置实战,涵盖核心原理、配置步骤及排错技巧。通过对比不同厂商的实现差异,提供可落地的跨厂商对接方案,助力企业网络工程师高效部署高可靠性链路聚合。

weixin_30836759的博客 423

4 种方法识别Linux系统 USB 设备

导读 如果在系统中插入一个设备,尤其是在桌面环境下,比如 USB 设备,它会自动挂载到一个指定目录,一般是在 /media/username/device-label 目录下,之后你就可以进入到该目录下访问那些文件了。然而,在服务器上就不是这么回事了,你必须手动挂载这个设备,并且指定一个挂载点。 查询USB设备 Linux 系统使用 /dev 目录下特定的设备文件来标识插入的

郑帅的博客 1986

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

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

Yi_qian的博客 3万+

ERA5数据批量下载

ERA5再分析数据的IDM接管下载

qq_38734327的博客 3034

原型链的理解

原型链 (JS原型与原型链继承) 实例对象与原型之间的连接,叫做原型链。proto( 隐式连接 ) JS在创建对象的时候,都有一个叫做proto的内置属性,用于指向创建它的函数对象的原型对象prototype。 内部原型(proto)和构造器的原型(prototype) 1、每个对象都有一个proto属性,原型链上的对象正是依靠这个属性连结在一起 2、作为一个对象,当你访问其中的一个属性或方法的时候,如果这个对象中没有这个 方法或属性,那么Javascript引擎将会访问这个对象的proto属性所指向上一

WiChat的博客 5838

RC模型车多电机驱动方案:从电调PWM原理到四电机安全连接实战

在电机控制领域,PWM(脉冲宽度调制)是实现精确调速的核心技术。其原理是通过调节固定周期内高电平的脉宽来编码控制指令,进而驱动电子调速器(电调)改变输出功率。这项技术对于需要多电机协同工作的场景,如RC模型车的差速转向或重型负载驱动,具有关键价值。它能实现动力的精细分配与同步,提升车辆的可控性与通过性。在实际应用中,为确保系统稳定,必须关注电流分配与信号同步问题。例如,通过为每个电机配备独立电调并采用信号并联(Y线)的方式,可以构建可靠的四电机驱动系统。这种方案能有效避免因单个电调过载或电机反电动势不一致导

weixin_30664615的博客 381

开坑!双向逆变电源实操系列--第一节PFC

文章摘要 本文介绍了PFC(功率因数校正)的基本概念及其重要性。PFC电路通过储能和功率因数校正两大功能,解决交流电小电压大电流的问题,并减少无功电流损耗。文章对比分析了无源PFC(电感串联式、填谷式、LC谐振式)和有源PFC(升压型、交错并联、图腾柱式)的拓扑结构及适用场景。针对2400W双相逆变电源设计,作者选择图腾柱PFC拓扑,详细阐述了设计思路,包括电气参数计算、性能指标设定、技术重点及风险预判。文章还提供了主电路参数定制计算方法,如BOOST电感值的推导过程,为电源工程师提供实用参考。

lyzh971103的博客 2545

浅谈原型链

浅谈原型链,简单理解

m0_65651534的博客 3326

Java小白入门200例81之Java接口

作者简介 作者名:编程界明世隐 简介:优快云博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢迎您关注,期待与您一起学习、成长、起飞! 引言 很多Java初学者问我,新手明明很用心、很努力学习的Java知识,转头又忘记了,很让人犯愁,小白如何能够快速成长、成为大牛呢? 其实要成为大神的技巧只有一个:“多学多练”,于是明哥就整理了比较典型的练习实例,通过练习能够快速提升编码技巧和熟练度,让你在成为大

编程界明世隐的博客 1358

原型和原型链 深度理解

原型:是function对象的一个属性,定义了构造函数创造出的对象的公共祖先,通过该构造函数产生的对象,可以继承该原型的属性和方法。 _proto_是function的一个属性 constructor 是每一个function 都有的默认函数。 主要作用: 实列化对象,constructor是自动调用 传参,为属性赋值 <script type="text/javascript"> function person(n){ // 属性..

qq_38110572的博客 2500

SAP SLT 在 carve-out 场景中的关键作用:从理论到实操全景展现

深入剖析 SAP Landscape Transformation(SLT Replication Server)在 carve‑out 场景中的价值,需要从 carve‑out 本身的背景逻辑说起。carve‑out 指的是企业因并购、拆分、剥离商业单元等因素,而将 SAP 系统中某部分业务(例如组织单元、公司代码、模块数据等) separated 出来,导入到独立的系统中。这一过程极具挑战性,既要确保业务连续性,又要实现数据精准迁移和系统隔离 (

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 7553

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

js原型链的深度理解!

一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明 var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; ...

dieqiang1689的博客 188

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

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

原型和原型链的理解_深度解析原型与原型链

# 构造函数 先来看下什么函数?- 按照犀牛书的说法,函数简单的说就是重复执行的代码块。函数是这样的一段 JavaScript 代码,它只定义一次,但可能被执行或调用任意次。那么构造函数呢?- 通过 new 函数名 来实例化对象的函数叫构造函数。他的主要作用就是对初始化的对象添加属性和方法- 概念很难理解,直接看下我们常用的构造函数长什么样子let 实现自己的构造函数function # 原型(...

weixin_39757169的博客 144

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

JS 原型与原型链深度解析 —— 从本质理解继承的实现

本文将从本质拆解原型与原型链的底层逻辑,讲解原型的核心特性、原型链的查找规则,以及基于原型的继承实现方式,解决开发中原型相关的各类问题。

阿雷编程实战 955

javascript基础之我见(1)----深度理解原型链

写在开始之前:   早就想要好好总结下javascript的基础知识了,所以从这篇文章起,我会开始总结各种js的语法知识,作为一名以js开发为生计的前端工程师,深深的着迷于js的语言魅力,而js最吸引人最强大的地方,便在于他独特的语法,能深刻的理解js的语法,是作为一个前端工程师的基本素质,在这里,笔者在总结的同时,也希望前端朋友们给予自己的补充和见解。那么就让我们从js最最独特的语法,闭包,原...

weixin_30575309的博客 90

深度理解javascript(7):原型链的灵活性

在javascript中,就没有模子了,月饼被换成了面团,你可以捏成自己想要的样子。   首先,对象属性可以随时改动。 对象或者函数,刚开始new出来之后,可能啥属性都没有。但是你可以这会儿加一个,过一会儿在加两个,非常灵活。 在jQuery的源码中,对象被创建时什么属性都没有,都是代码一步一步执行时,一个一个加上的。   其次,如果继承的方法不合适,可

u012841667的专栏 437

Web前端最全前端面试十有九问之原型链_怎么给面试官讲解原型链,连续四年百度前端岗必问面试题

大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84435768的博客 1081

原型和原型链

之前看《JavaScript高级设计程序》对原型和原型链有了一定的了解,也觉得自己掌握了,但是今天回顾起来,发现很多都忘记了…今天就来总结下吧 原型 任何函数都有显式原型prototype 任何引用(对象/数组/函数)都有隐式原型proto 实例对象的隐式原型和其构造函数的显示原型相同 function Person(name) { this.name = name; } Object.prototype.zhiye = 'student'; var l

qq_40198520的博客 95

前端面试必杀:原型、原型链以及继承(一张图搞定面试)

什么是对象多个数据(属性)的集合;用来保存多个数据(属性)的容器;属性组成属性名:字符串(标识);属性值:任意类型;一般:属性值不是function,描述对象的状态;方法:属性值为function的属性,描述对象的行为;特别的对象数组:属性名是0,1,2,3之类的索引;函数:可执行的;对象是一种复合数据类型,可以保存不同类型的属性;创建对象向对象中添加属性.属性名;[‘属性名’]:属性名有特殊字符/属性名是一个变量;obj.属性名 = 属性值;

木头房子的格子铺 707

javascript 深度克隆(深度拷贝一个对象) prototype __ptoto__ consstructor

最近看到前端的面试题,是 关于深度克隆还有浅度克隆的 JavaScript按值传递和按引用传递: JavaScript的基本类型一共五种包括(undefined,Null,boolean,Number,String)这几种都是按照值传递; 还有引用类型(数组和对象)按址传递,引用类型在值传递的时候是传递的地址,也就是说的按引用传递,对于引用传给函数的是变量的地址, 传进去的时候这时候就相当

woshinannan的专栏 1960

10个必须掌握的JavaScript面试技巧:javascript-interview-questions深度解析

JavaScript作为前端开发的核心语言,掌握其面试技巧对开发者职业发展至关重要。javascript-interview-questions项目收集了1000多个JavaScript面试问题,是提升面试能力的宝贵资源。本文将深度解析这个项目的核心内容,帮助你掌握10个关键的JavaScript面试技巧。 ## 🎯 掌握原型链概念 原型链是JavaScript继承机制的核心,理解它对于回答

gitblog_07378的博客 435
上一篇: javascript中数据类型转换那些事
下一篇: 关于javascript中apply()、call()和bind()方法
leadn
博客等级 码龄10年 13粉丝 12原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值