Javascript面向对象及组件详细介绍（五）原型链

最新推荐文章于 2022-11-26 16:44:14 发布
最新推荐文章于 2022-11-26 16:44:14 发布
阅读量501 收藏 6
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端Javascript相关操作说明 文章标签： javascript 函数 对象 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gujinapenggu5/article/details/50437141
本文深入探讨了JavaScript中原型链的概念，展示了如何通过原型链访问对象属性，并介绍了hasOwnProperty、isPrototypeOf等方法的使用。此外，文章还阐述了constructor属性的作用及如何通过构造函数获取对象类型。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原型链原型链原型链原型链原型链

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //原型链 : 实例对象与原型之间的连接，叫做原型链  
  9.   
  10. //原型链的最外层 : Object.prototype  
  11.   
  12. function Aaa(){  
  13.     //this.num = 20;  
  14. }  
  15. //Aaa.prototype.num = 10;  
  16. Object.prototype.num = 30;  
  17.   
  18. var a1 = new Aaa();  
  19. alert(a1.num);  
  20.   
  21. </script>  
  22. </head>  
  23.   
  24. <body>  
  25. </body>  
  26. </html>  

hasOwnProperty

是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //hasOwnProperty : 看是不是对象自身下面的属性  
  9.   
  10. var arr = [];  
  11. arr.num = 10;  
  12. Array.prototype.num2 = 20;  
  13.   
  14. //alert(  arr.hasOwnProperty('num')  );  //true  
  15.   
  16. alert(  arr.hasOwnProperty('num2')  );  //false  
  17.   
  18.   
  19.   
  20. </script>  
  21. </head>  
  22.   
  23. <body>  
  24. </body>  
  25. </html>  

constructor 属性返回对创建此对象的数组函数的引用。

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. //constructor : 查看对象的构造函数  
  9.   
  10. /*function Aaa(){  
  11. }  
  12.   
  13. var a1 = new Aaa();  
  14.   
  15. alert( a1.constructor );  //Aaa  
  16.   
  17. var arr = [];  
  18. alert( arr.constructor == Array );  //true*/  
  19.   
  20.   
  21. /*function Aaa(){  
  22. }  
  23. //Aaa.prototype.constructor = Aaa;   //每一个函数都会有的，都是自动生成的  
  24.   
  25. //Aaa.prototype.constructor = Array;  
  26.   
  27. var a1 = new Aaa();  
  28. alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty );  //true*/  
  29.   
  30.   
  31. /*function Aaa(){  
  32. }  
  33.   
  34. Aaa.prototype.name = '小明';  
  35. Aaa.prototype.age = 20;  
  36.   
  37. Aaa.prototype = {  
  38.     constructor : Aaa,  
  39.     name : '小明',  
  40.     age : 20  
  41. };  
  42.   
  43. var a1 = new Aaa();  
  44. alert( a1.constructor );*/  
  45.   
  46.   
  47. function Aaa(){  
  48. }  
  49.   
  50. Aaa.prototype.name = 10;  
  51. Aaa.prototype.constructor = Aaa;  
  52.   
  53. for( var attr in Aaa.prototype ){  
  54.     alert(attr);  
  55. }  
  56.   
  57. </script>  
  58. </head>  
  59.   
  60. <body>  
  61. </body>  
  62. </html>  





面向对象编程&原型与原型链
weixin_50756332的博客
01-17 661
对象是什么？为什么要面向对象？面向对象的优势在哪里？
《原型链的柔性骨架：JavaScript面向对象架 构的动态设计与演化逻辑》
最新发布
xy520521的博客
08-09 995
本文深入剖析JavaScript原型链的本质与架构逻辑，阐释原型作为对象“隐性基因”的动态特性，解析构造器的双重角色，探讨基于原型链的动态继承与拓扑重组。还分析共享与隔离、稳定与演化等核心矛盾的平衡之道，介绍原型思维的实践路径，以及在复杂场景中的应用与风险规避，揭示原型链蕴含的“演化优于设计”等哲学思想，为构建灵活低耦合的JavaScript架构提供深层指引。
js的原型链
weixin_34060741的博客
09-28 276
开篇 之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。 我们经常会这么写 function Pe...
继承、原型链、在组件开发上的应用
weixin_33811961的博客
11-19 278
大半年前写过关于原型链和继承的笔记了，不过今天看到一篇关于组件化开发页面的博客，14年的，那时候react、angular还没那么火吧，略有感触，还是写篇简单的读后感吧。 博客原文：【组件化开发】前端进阶篇之如何编写可维护可升级的代码 创建对象和对象继承： 我一直觉得，前端js有两个地方是必须掌握的，一个是对象，一个是函数。其他相关概念，比如原型、继承、闭包等都是二者的延伸和...
原型与原型链基本概念
m0_47556952的博客
08-06 255
function Person(){ this.name = 'xiaoming'; this.showName = function(){ return '我叫：' + this.name; }; } var p1 = new Person(); var p2 = new Person(); console.log( p1.showName == p2.showName ); //fal...
原型链
醉殇姒若梦遗年 ツ的博客
09-23 213
原型链 1.什么是原型链？ 原型链是实例对象与原型之间的链接 2.原型链是怎么形成的？ 要点1 请看以下代码，思考这样一个问题“bb是否会被打印出来？为什么？ function Person(){ this.name = "小明"; } Person.prototype.showName = function(){ ...
原型链的顶端是什么
qq_29055201的博客
06-06 7945
js中到处是对象，对象之间往往会通过__proto__连接在一起，这种链接的现象被称为原型链。极少数的对象会滑原型，比如: Object.create(null)生生的对象里面没有任何属性，非常“空”，我们称它为字典，这种字典对象适合存放数据，不必担心原型带来的副作用。 对象生的有三种方式，一种是上面的Object.create(),一中是字面量（var a = {}）,另外一种是通过构造函数（v...
javascript面向对象tab(增删改查)案例.zip
06-21
在这个"javascript面向对象tab(增删改查)案例.zip"中，我们可以深入理解JavaScript的面向对象编程概念，并通过实际的Tab功能实现（增删改查操作）来巩固这些知识。 面向对象编程（Object-Oriented Programming, OOP...
原生js编写基于面向对象的分页组件
11-28
1. 使用构造函数和原型链实现面向对象的设计。 2. 自定义事件机制，方便与其他代码交互。 3. 动态生成分页链接，根据当前页码和总页数调整显示。 4. 监听点击事件，处理页码切换，并通过回调函数传递信息。 这样的...
详解JavaScript中的对象、原型链、constructor、super以及this
Nshrod的博客
08-04 1516
一图详解JavaScript中的对象、原型链、constructor、super以及this
Chrome去除无限debugger
lemonguess的博客
07-24 3597
显性反调试分类： 1.非虚拟机 2.虚拟机（eval Function） 一、非虚拟机 1.右键设置false 2.直接替换代码 1.2.1谷歌内核浏览器默认提供（不是很推荐，适合简单的js文件） 首先确认该js代码必须是网上在线的代码 在Source选项卡中找到重写面板Overrides +Select folder for ovverrides//选一个本地文件夹 是，确认证书 找到该文件，文件名处右键点击，选择Save for overrides 紫色圆圈状态下，说明可以进行修改了 1.2.
Js逆向教程-14反调试
编辑编辑器
11-26 2252
将你的预期值和实际值进行比较，如果不一样，就是这种debugger 只能通过浏览器调用的堆栈区分出正确的逻辑。通过将editbreakpoint设置为false 可以禁用这个调试。通过hook方式，将运行的函数设为空就可以跳过debugger了。最好的方式就是不要被识别出来调试，可以通过下hook解决。非虚拟机的方式不会跳转 到一个vm的页面。在eval里面运行debugger.（ 打开页面 写历史记录卡死）发现你调试之后 引入错误的逻辑。代码会在调试的时候段下来。利用chrome插件。
用原型链的方式写一个类和子类
weixin_30580943的博客
03-14 169
原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的.那么怎么用用原型链的方式写一个类和子类?<script> function Person(name,age){ this.name=name; this.age=age; } Person.prototype.study=function(){ return "...
js判断input中是否有值问题
热门推荐
午夜灬玫瑰焰钻的博客
11-03 1万+
js判断input中是否有值问题 A B var inputA = document.getElementById('inputAId'); var inputB = document.getElementById('inputBId'); function getA(){ if(inputA.value != ''){     alert('提交InputA
使用插件jquery.PrintArea.js，打印样式信息的解决办法
午夜灬玫瑰焰钻的博客
08-05 7616
使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来解决办法如下 一、看css的引用文件方式 　　1、直接在内部的元素中使用”style”属性来定义样式，比如：<div style=”width:800px;”></div> 　　2、在<head>元素中使用”style”元素来指定 　　3、使用<link>...
JavaScript escape() 函数详解
午夜灬玫瑰焰钻的博客
01-06 3150
escape()函数用于对字符串进行编码，并返回一个可在所有计算机上读取的编码字符串。 该函数属于Global对象，所有主流浏览器均支持该函数。但目前已不推荐使用该函数，尤其是不能用来对URI进行编码。 语法 escape()函数已过时，请使用encodeURI()或encodeURIComponent()函数替代该函数。 escape()函数的语法如下： escape(
JavaScript unescape() 函数详解
午夜灬玫瑰焰钻的博客
01-06 1734
unescape()函数用于对已经使用escape()函数编码的字符串进行解码，并返回解码后的字符串。 该函数属于Global对象，所有主流浏览器均支持该函数。但目前已不推荐使用该函数，尤其是不能用来对URI进行解码。 语法 unescape()函数已过时，请使用decodeURI()或decodeURIComponent()函数替代该函数。 unescape()函数的语法
Javascript查找字符串中的某个值，截取其之前。和之后的值
午夜灬玫瑰焰钻的博客
12-15 1542
1、例如截取xxx.txt 点后面和前面的值 var str1 = "xxxaaa.txt"; var str2 = "xxxbbb.txt"; var str3 = "xxxccc.txt"; document.write(str1.split(':')[0]) //输出xxxaaa document.write(str1.split(':')[1]) //输出txt
深入理解JavaScript面向对象DOM编程技巧
在JavaScript中，面向对象的实现通常是基于原型链（prototype chain）。 - **对象（Object）**：在JavaScript中，对象可以包含属性和方法。属性是对象的状态，方法是对象的行为。 - **类（Class）**：在ES6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值