原型链 什么是原型链?为什么要使用原型链呢?使用原型链有什么作用?

本文详细解释了JavaScript中的原型链概念,包括其工作原理(如实例对象与原型对象的连接)、用途(实现继承和代码复用),以及__proto__和prototype的区别。文章通过示例代码演示了原型链的起点——Object,以及原型链查找机制的过程。
摘要由CSDN通过智能技术生成

什么是原型链?

原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子!
原型链中就是实例对象原型对象之间的链接。每个函数都有一个prototype属性,这个prototype属性就是我们的原型对象,我们拿这个函数通过new构造函数创建出来的实例对象,这个实例对象自己会有一个指针(_proto_)指向他的构造函数的原型对象!这样构造函数和实例对象之间就通过( _proto_ )连接在一起形成了一条链子。

废话不多说,直接上图:
原型链结构图

为什么要使用原型链呢?

1.为了实现继承,简化代码,实现代码重用!
2.只要是这个链条上的内容,都可以被访问和使用到!

使用原型链有什么作用?

  • 继承
  • prototype用来实现基于原型的继承与属性的共享
  • 避免了代码冗余,公用的属性和方法,可以放到原型对象中,这样,通过该构造函数实例化的所有对象都可以使用该对象的构造函数中的属性和方法!
  • 减少了内存占用

原型链的特点

  1. 就近原则,当我们要使用一个值时,程序会优先查找离自己最近的,也就是本身有没有,如果自己没有,他就会沿着原型链向上查找,如果还没有找到,它还会沿着原型链继续向上查找,找到到达Object
  2. 引用类型,当我们使用或者修改原型链上的值时,其实使用的是同一个值!
  3. JS中每个函数都存在原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
  4. 每个继承父函数的实例对象都包含一个内部属性_proto_。该属性包含一个指针,指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。

__proto__和prototype的区别

_proto_ :是实例对象指向原型对象的指针,隐式原型,是每个对象都会有的一个属性。
prototype:是构造函数的原型对象,显式原型,只有函数才会有。

示例代码

//构造函数
function fn(){
	num = 20
}
//为构造函数添加原型对象
fn.prototype.num = 30;
//实例化构造函数
var obj = new fn();
//此时打印出来的obj本身有一个属性num=20,在它的__proto__中有num=30
console.log(obj);
console.log(obj.__proto__.num == fn.prototype.num) 
//上面两个num的比较结果是true,这个就说明了实例对象的__proto__是有关联的,并且obj的__proto__shi 指向构造函数的原型对象的,所以两个值是相等的!

  
  
  • 控制台测试详解图

    原型链代码详解图

    话说回来,原型链既然是一个链条,那肯定是存在一个开头的吧,那它是从哪开始的呢?我们如何才能知道?

    原型链的源头
    由上面可知,原型链的源头是Object!
    哈哈,这也就进一步印证了为什么说万物皆对象了!

  • 28
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在JavaScript中,每个对象都有一个隐藏的 `__proto__` 属性,它指向该对象的原型原型是一个普通的对象,它包含了共享属性和方法。当我们访问一个对象的属性或方法时,JavaScript引擎会首先在该对象本身查找,如果找不到,则会沿着原型链向上查找,直到找到该属性或方法,或者到达原型链的顶端(Object.prototype)。这个原型链的过程就是通过 `__proto__` 属性来实现的。 例如,当我们创建一个实例对象 `teacher` 时,如果 `teacher` 对象本身没有 `teach()` 方法,JavaScript引擎会通过对象的 `__proto__` 属性查找到 `Teacher.prototype` 的显式原型上,如果 `Teacher.prototype` 仍然没有该方法,它会继续沿着 `Teacher.prototype.__proto__` 找到 `Person.prototype`,直到找到 `teach()` 方法并执行。这样就形成了一个原型链。 同时,可以注意到 `Object.prototype.__proto__` 的值为 `null`,即 `Object.prototype` 没有原型。所以在原型链中,当找到顶层原型还没有属性时,就会返回 `undefined`。 需要注意的是, `__proto__` 是一个非标准的属性,实际开发中不应该直接使用它。它只是内部指向原型对象 `prototype` 的一个指示器,我们应该使用 `Object.getPrototypeOf()` 或 `Object.setPrototypeOf()` 来访问和设置对象的原型。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [JS:原型原型链](https://blog.csdn.net/elevenhope/article/details/122882582)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [JavaScript原型链(重要)](https://blog.csdn.net/liyuchenii/article/details/125957625)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值