JS面向对象-原型链的认知

【JavaScript 中的原型链是什么?】 原型链是 JavaScript 语言设计的核心特性,理解原型链有助于:深入理解 JavaScript 对象模型掌握面向对象编程技巧编写更高效的代码避免常见的陷阱和错误随着 ES6+ 新特性的引入,虽然 class 语法让继承更加直观,但原型链仍然是 JavaScript 底层实现的基础。建议开发者:理解原型链的工作原理合理使用原型继承避免滥用原型扩展关注性能影响通过深入理解原型链,你将能够编写出更优雅、更高效的 JavaScript 代码。 阅读详情

直接上代码


//第一种将父级实例化对象直接赋给子集的原型链 实现继承
	function Parent(array){
		this.array = array;
		this.color = "red";
		this.size = {width:'300px',height:"300px"};
	}
	function Child1(){
	 	this.border = '1px solid ' + this.color;
	}
	//子集可以继承父级的属性和方法
	Child1.prototype = new Parent();
	var child1 = new Child1();
	console.log(child1.border);//1px solid red


	// 第二种通过call  或者 apply实现继承
	function Child2(){
		Parent.apply(this,[{'name':'zhangsan'}]);
	 	this.border = '1px solid ' + this.color;
	 	console.log(this.array);//{'name':'zhangsan'}

	}
	var child2 = new Child2();
	console.log(child2.border);//1px solid red
	console.log(Parent.prototype.isPrototypeOf(child1));//true
	console.log(child2.hasOwnProperty('size'));//true
	console.log(child1 instanceof Child1);//true



js原型链污染 JavaScript 原型链是实现继承的一种方式,每个对象都有一个内部属性(在代码中可通过__proto__访问),它指向该对象的原型对象。当访问一个对象的属性或方法时,JavaScript 首先会在该对象本身查找,如果找不到,就会沿着原型链向上查找,直到找到该属性或方法,或者到达原型链的末尾(传统的面向对象(例如java),采用类的形式,以类为模版创建对象JavaScript 是基于原型链实现继承和封装。 阅读详情

相关推荐

【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略

本文全面解析了JavaScript中的继承机制,核心围绕原型链这一核心概念展开,阐述了其在对象继承中的作用与重要性,并介绍了几种主要的继承实现方式。以下是文章内容的概括:📌原型基础每个JavaScript对象都隐含一个属性,通常通过__proto__访问,指向创建它的构造函数的prototype对象。构造函数的prototype本身是个对象,包含可被实例共享的方法和属性。示例展示了如何通过原型链,实例能访问到构造函数原型上的方法。📌原型链的形成与查找规则。

Allen- 2270

js面向对象,js原型,原型链,prototype,_proto_

js面向对象

weixin_44992737的博客 1149

修复ASUS in WinRE教程

暑假入手了天选三,发现是win11家庭版,本来想着家庭版将就一下无所谓,结果在使用的过程中发现相较于专业版真的是不能比,于是自己就重装了系统,发现ASUS in WinRE入口不见了,折腾半天最后成功修复。

weixin_46202629的博客 1万+

JavaScript-js中的面向对象-原型链

JavaScript虽然是一门与java无关的弱类型语言,但javascript也是“支持”面向对象程序设计思想的,也就是说,js提供“类”、“对象”、instanceof等面向对象编程思想及工具。不过,js的类,同时也是js的函数;js的对象与“其所属类”之间的关系,是由“原型链”决定的。 原型链的存在使得对象与其所属类之间建立了联系,原型链用'__proto__'表示,每个js对象都拥有一个原型链,而对于类,每个js的类都拥有一个原型对象、一个原型链和一个prototype。图示如下: 且同一个

wexin_mylove的博客 290

Qt制作大数据可视化大屏展示电子看板

Qt制作大数据可视化大屏展示电子看板 解决当前最火的大数据可视化大屏展示,整个项目通过Qt开发,集成了QML/QChart/ECharts及自定义控件等模块,所有的可视化控件都可以集成到其中。可以随意增加和减少模块,各个模块可以随意拖拽,整体可以个性化布局。模块标题栏可自定义,包括标题文本信息、文本颜色、宽度/高度、背景颜色、按钮个数等功能,满足各个样式需求。 实例中主要展示了现成的一些仪表盘...

Qt自定义控件及应用开发 7707

CMakeTestCCompiler.cmake错误解决

CMakeTestCCompiler.cmake错误解决欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 最近编译项目的时候,遇到一个cmake的错误,具体错误信息如下: /path-to-pr

昨夜星辰的博客 2万+

js 面向对象,原型链

js的面向对象不像JAVA一样这么严谨,原型链也很难理解。这里就用我理解的语言形式来解释下。 比如现在有一个叫做DOG的构造函数,表示狗对象的原型,相当于java里面的构造函数 function DOG(name){   this.name = name; //this指向的是这个对象实例,name是公有属性 } 对这个构造函数使用new,就会生成一个狗对象的实例。 var dogA

abS9879的专栏 367

NCCL分布式训练中ibv_reg_mr_iova2内存分配失败的3种解决方案(附详细排查流程)

本文深入探讨了NCCL分布式训练中ibv_reg_mr_iova2内存分配失败的3种解决方案,包括快速临时修复、标准系统配置和PAM模块根治方案。详细分析了错误原因,提供了完整的排查流程和性能优化建议,帮助开发者高效解决RDMA网络环境下的内存锁定问题。

nut55的博客 626

JavaScript-原型与原型链篇

1、__proto__ 与 prototype 要讲解原型与原型链,首先,我们要了解两个基本概念——__proto__和prototype。 ① prototype(函数的原型对象):函数才有prototype,而且所有函数必有prototype。prototype是一个对象,指向了当前构造函数的引用地址呢。 ② __proto__(对象的原型):对象才有__proto__,而且所有对象...

Winn~ 427

Windows 10 本地硬盘变成了可弹出磁盘

今天新装了系统, 电脑是一个SSD+HHD, 没想到装好之后右下角显示可安全删除设备, 两个硬盘在那里. 这还得了. 查了一下午, 大致知道了是什么问题. Standard SATA AHCI controller使用高性能的硬盘模式就会把硬盘看作是一个可热插拔的存储器, 所以自然就会显示可弹出. 如果你的BIOS支持关闭HotSwap或者HotPlug, 那么直接关闭就可以了. 或者你直接在BIOS里把磁盘模式改为IDE, 不过这样就发挥不好你SSD的高性能了. 还有一种解决方法, 就是手动让系统把这两个

落日之城 4万+

2026华为OD机试 新系统真题题库目录|机考题库 + 算法考点详解

华为OD机试 新系统真题题库目录|机考题库 + 算法考点详解华为od机试,华为od机试真题,华为od机试E卷,华为odE卷,华为od机试真题E卷,华为OD,华为OD机试,华为OD机试真题,华为od机考,华为od机试D卷,华为od机试真题D卷,华为od手撕代码,华为od,华为od机试C卷,华为od e卷,华为2026e卷,od机试,2026E卷,华为OD机试E卷,什么是华为od,华为od介绍,全面了解华为od,2026华为od,如何备战华为od,华为od算法,华为od手撕代码,华为OD机试2024年最新题库,

KJ.JK 4720

JS的面向对象编程的(闭包,作用域,原型链,封装,继承,多态)

闭包的概念 闭包就是能够读取其他函数内部变量的函数。 1,变量的作用域无非就是两种: 全局变量和局部变量。 2,如何从外部读取局部变量?   function f1(){     n=999;     function f2(){       alert(n); // 999     }   } 在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反...

qq_43493141的博客 1095

Parasoft C++Test软件单元测试_操作指南

本文主要为使用C++TEST进行单元测试的流程性操作讲解,后续文章将以专题形式进行详细讲解,以及用一些被测函数作为示例进行实例讲解。

文章主要涉及嵌入式软件开发、测试、项目管理等,欢迎交流,共同进步。 1577

JavaScript-原型链结构图

若有不对的地方,请大佬指正。

m0_74015961的博客 116

在 ABAP Push Channel 里玩转 Detached Client:用 Attach Handle 把 WebSocket 连接交接给业务逻辑

摘要:本文介绍了ABAP Push Channels (APC)中的Detached Client技术,该技术通过将WebSocket连接建立与后续处理分离,实现更高效的实时通信。核心流程包括创建连接、使用connect_and_detach交接连接、以及通过attach handle重新附着发送消息。文章还探讨了PCP协议和AMC技术在企业级推送场景中的应用,并通过示例代码展示了Detached Client的具体实现方式。这种设计解决了传统轮询的资源浪费问题,特别适用于生产线监控、客服系统等需要服务端主

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

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

【JavaScript】面向对象——原型与原型链(详解)

在JavaScript中,函数是一个包含属性和方法的类型的对象。而原型就是类型对象的一个属性。在函数定义时就包含了属性,它的初始值是一个空对象。在JavaScript中并没有定义函数的原型类型,所以原型可以是任何类型。原型是用于保存对象的共享属性和方法的,原型的属性和方法并不会影响函数本身的属性和方法。......

qq_49002903的博客 1943

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

JavaScript原型和原型链

JavaScript 的核心机制原型和原型链是实现面向对象继承的关键。每个对象(除 null 外)都有一个原型对象作为模板,通过 __proto__ 属性访问,而函数对象特有的 prototype 属性指向其实例的原型。原型链由对象通过 __proto__ 连接形成,属性查找会沿链向上直至 Object.prototype(终点为 null)。通过将子类原型指向父类实例(而非直接共享父类原型)可实现继承,避免污染父类。原型链机制使 JavaScript 无需类也能实现继承,是理解面向对象编程的基础。

students33的博客 1454

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

JavaScript原型链

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

qq_37464878的博客 6692

【JS】理解 JavaScript 的原型与原型链

在 JavaScript 中,每个函数都有一个prototype属性,这个属性指向一个对象,这个对象就是该函数的原型对象。原型对象可以包含属性和方法,这些属性和方法可以被该函数创建的所有实例对象所共享。// 输出:Hello, my name is Alice// 输出:Hello, my name is Bob在上面的例子中,Person函数的prototype属性指向一个原型对象,该原型对象包含一个sayHello方法。person1和person2都是Person。

2301_78802081的博客 1254

JavaScript 原型/原型链

回到我们开篇的问题,class 关键字帮我们做了什么?instanceof 关键字又帮我们简化了什么?这两个问题的答案已经十分清晰了,但也不妨在这里做个总结:class 本质是一个语法糖,他帮我们处理绑定每个对象的原型,实现属性的共享。// 无 class 的写法// true// 对应的 class 写法显而易见的,class 的写法更符合我们面向对象的编程习惯,function 的写法则相对不那么直观。

专注前端领域方向的内容 1653

面向对象编程--JS原型和原型链

JavaScript 的继承和属性查找机制完全依赖原型和原型链,理解它们是掌握 JS 面向对象编程的关键!​是它实现继承和属性查找的核心机制。理解它们,才能真正掌握 JavaScript 的面向对象编程。JavaScript 是一门基于原型的语言,​。本质上是语法糖,底层仍然是基于原型的继承。dog (Dog 实例)dog (Dog 实例)对象自身 → 对象的。

hyk15543的博客 895

JS Raccoon:掌握JavaScript原型链与继承的完整教程

JS Raccoon是一个专注于Web开发技巧的开源项目,提供了丰富的JavaScript编程指南。本教程将帮助你彻底理解JavaScript中独特的原型链与继承机制,这是掌握面向对象编程的核心基础。 ## 为什么原型链是JavaScript开发者的必备知识? JavaScript作为一门灵活的脚本语言,其对象模型与传统的类式继承语言有本质区别。理解原型链不仅能帮助你写出更优雅的代码,还能让你

gitblog_00071的博客 617

「JavaScript深入」彻底搞懂JS原型与原型链

「JavaScript深入」彻底搞懂JS原型与原型链:原因、使用class实现继承、原型、原型链、prototype和proto

XH_jing的博客 1612

JS(原型链)

在聊原型链之前多对吹几句,为啥需要对象?对象的好处?在传统的开发中(也叫面向过程)。顾名思义,面向过程是你要写所有的操作代码,在这个过程中,代码重复,一旦出错或者用户修改要求,要修改的代码就很多,后期维护人员绝对累死。         在生活中,面向过程就是,你要去买东西,你要自己亲自去买,而面向对象,就是你在家里,叫别人去买。这里的“别人”就是对象。你只知道这个对象可以给你买来东西,但买的过程,

simon_dg的博客 3060

如何掌握JavaScript原型链:面向对象编程的终极指南

JavaScript作为现代Web开发的基石,其独特的原型链机制是理解面向对象编程的核心。本文将通过简单易懂的方式,带你全面掌握JavaScript原型链的工作原理,让你能够轻松应对日常开发中的原型继承问题。 ### 什么是JavaScript原型链? JavaScript是一种基于原型的编程语言,与传统的基于类的语言不同,它通过原型链实现对象之间的继承关系。每个对象都有一个原型对象,对象可以

gitblog_00103的博客 844

【JS学习笔记】JS面向对象,JS原型与原型链

参考自https://juejin.im/entry/58e75555b123db15eb8b605e 参考自:https://juejin.im/post/5a94c0de5188257a8929d837 以下是小陈的阅读理解结果: 首先:JavaScript是脚本语言.JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML 页面的编程代码。 JS是如...

你好呀,欢迎你的到来。 455
上一篇: JS获取页面所有元素并统计每个标签的个数
下一篇: js判断鼠标移入的方向并触发事件
HeiShanLaoYao889
博客等级 码龄10年 3粉丝 12原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值