原型链

什么是原型链?

为什么要使用原型链呢?

使用原型链有什么作用?

原型链的特点

__proto__和prototype的区别

示例代码

控制台测试详解图

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

什么是原型链?

原型链通俗易懂的理解就是可以把它想象成一个链条,互相连接构成一整串链子!

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

废话不多说,直接上图:

为什么要使用原型链呢?

1.为了实现继承,简化代码,实现代码重用!

2.只要是这个链条上的内容,都可以被访问和使用到!

使用原型链有什么作用?

继承

prototype用来实现基于原型的继承与属性的共享

避免了代码冗余,公用的属性和方法,可以放到原型对象中,这样,通过该构造函数实例化的所有对象都可以使用该对象的构造函数中的属性和方法!

减少了内存占用

原型链的特点

就近原则,当我们要使用一个值时,程序会优先查找离自己最近的,也就是本身有没有,如果自己没有,他就会沿着原型链向上查找,如果还没有找到,它还会沿着原型链继续向上查找,找到到达Object

引用类型,当我们使用或者修改原型链上的值时,其实使用的是同一个值!

JS中每个函数都存在原型对象属性prototype。并且所有函数的默认原型都是Object的实例。

每个继承父函数的实例对象都包含一个内部属性_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 指向构造函数的原型对象的,所以两个值是相等的!

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)

控制台测试详解图

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

由上面可知,原型链的源头是Object!

哈哈,这也就进一步印证了为什么说万物皆对象了!

原型链,什么是原型链?原型链的作用相关推荐

  1. 【区块链Go语言实现】区块链基本原型

    链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 0x00 介绍 区块链(Blockchain)是21世纪最具革命性的技术之一,目前它仍处于逐渐成熟阶段,且其发展潜力尚未 ...

  2. java原型链_深入总结Javascript原型及原型链

    本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...

  3. 区块链java语言,基于Java语言构建区块链(一)—— 基本原型

    引言 区块链技术是一项比人工智能更具革命性的技术,人工智能只是提高了人类的生产力,而区块链则将改变人类社会的生产关系,它将会颠覆我们人类社会现有的协作方式.了解和掌握区块链相关知识和技术,是我们每位开 ...

  4. 真丶深入理解 JavaScript 原型和原型链(二):原型和原型链

    原文地址: https://www.jeremyjone.com/745/,转载请注明. 上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系. 原 ...

  5. 【原型链】JS中的原型链到底是什么

    1.构造函数 JS中的构造函数和普通函数没有本质区别,要用调用方式的不同来区分. 在调用构造函数时要用new Func()的方法来调用,此时函数会默认返回this 为了与普通函数区分,构造函数的函数名 ...

  6. JS 原型链 prototypt 和隐式原型 _proto_

    prototype(原型) :  对象的一个属性,此属性使您有能力向对象添加属性和方法,当访问对象不存在属性是会自动到 prototype 中找 _proto_(隐式原型): 此对象构造函数(类)的原 ...

  7. 一张图看透JavaScript原型关系:__proto__(对象原型)和prototype(函数原型)

    问:函数岂不是拥有两个原型? 答:是的,函数有两个原型proto和prototype. 因为函数是对象,而对象就有原型,其原型就是proto.函数是Function的实例,所以此原型就是Functio ...

  8. 原型的指向是否可以改变 原型最终指向了哪里 原型指向改变如何添加方法和访问

    原型的指向是否可以改变 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

  9. 设计模式——行为型模式之责任链模式(简简单单入门责任链,理解I/O流消息怎么逐步传递处理以及服务器框架转发)

    文章目录 前言 一.责任链模式定义 二.责任链模式结构 三.责任链高级应用 四.责任链模式优缺点 设计模式系列文章 结尾 前言 作者更有一系列设计模式文章(还在持续更新),图例丰富,少量代码,适合入门 ...

  10. 理解原型设计模式以及JavaScript中的原型规则

    原型规则 原型规则 所有的引用类型(数组.对象.函数),都具有对象特征,即可自由扩展属性: var arr = []; arr.a =1; 所有的引用类型都有对象的特性,即可自由扩展 所有的引用类型都 ...

最新文章

  1. 城市“脑梗” 当前城市大脑面临的困境
  2. 使用JCOOKIES创建http cookie
  3. Hadoop-Yarn-框架原理及运作机制
  4. wxWidgets:wxActivateEvent类用法
  5. kotlin spring-webflux netty
  6. linux如何停用xdmcp服务,如何禁用XDMCP服务
  7. jquery获取html页面参数乱码,JS或Jquery获取浏览器URL的参数值 汉字值乱码 并转码...
  8. java在什么环境变量_Java-环境变量
  9. And(CF-1013B)
  10. 实践线性模型对于大规模一类别协同过滤
  11. 小米手表外观官宣:方表盘+黑银两色
  12. ef 批量保存 oracle,mybatis-oracle与mysql批量添加
  13. [csu/coj 1632]LCP
  14. 消费金融盈利分析及风控能力建设
  15. yum无法正常使用的解决办法
  16. [BZOJ4542] [Hnoi2016] 大数 (莫队)
  17. springboot freemarker配置_[SpringBoot2.X] 13- 整合视图层技术(Freemarker)
  18. 认识XinYiCMS从这里开始!
  19. halcon修改程序框字体大小
  20. 问题 B: 结构体---职工信息结构体

热门文章

  1. postgres数据库修改默认用户密码
  2. Tomcat下载步骤详细and简单
  3. MSN,QQ,阿里旺旺WEB在线源码
  4. Fuzz:内存模糊测试
  5. 《月亮和六便士》读后感
  6. 163相册验证码图片的识别手记之二 --- 识别
  7. 【element 】使用xlsx、FileSaver实现导出,CDN引入,FileSaver.saveAs is not a function.saveAs is not a function
  8. JSP JAVAweb在线考试系统源码网上考试系统源码(ssm考试管理系统)
  9. 《怪物史莱克4》的一点启示
  10. 霍夫曼树及霍夫曼编码的C语言实现,霍夫曼树及霍夫曼编码的C语言实现