最近学习JavaScript原型与原型链的时候,被这块知识烧得脑壳疼,prototype与__proto__混淆不清。网上各种图解,都画的好复杂,绕老绕去,不明所以,看得越来越糊涂。还是亲自动手敲敲,理解理解原型和原型链究竟是什么。

1、原型

(1)首先,什么是原型?

1>.定义:在JavaScript 中,每当定义一个对象的时候,对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype属性,这个属性就指向函数的原型对象。任何一个对象,都可以充当其他对象的原型;由于原型对象也是对象,所以它也有自己的原型。

2>.代码:

     function f() {};console.log(typeof f.prototype)
复制代码

3>.打印结果:

(2)示例:

1>.代码:

    function Person(name) {this.name = name;}Person.prototype.sex = 'male'var Jack = new Person('Jack');var Rose = new Person('Rose');console.log(Jack.sex);console.log(Jack.name);console.log(Rose.sex);console.log(Rose.name)
复制代码

2>.打印结果:

3>.以上代码,构造函数Person的prototype属性,就是实例对象Jack和Rose的原型对象。给原型对象上添加一个sex属性,可以看到它的实例对象都共享了该属性。

4>.根据上述这个构造函数Person,再来看看到底创建的实例对象都有什么属性。

5>.打印结果:

6>.从打印结果可以看出,函数对象Preson有一个prototype属性,这个属性就指向函数的原型对象__f()__,图中倒数第8行。而实例Jack是通过Person new出来的对象,所以Person充当了Person的原型对象,同样也是自己的原型对象。虽然有些绕,但是结合定义1>.和上述示例来看,就不难理解原型到底是什么。需要注意的是:每个对象都有 __proto__ 属性,但只有函数对象才有 prototype 属性。

7>.简单来讲,原型对象就像EVA机器人的设计图和零号机,那么在初号机,二号机,三号机等等,都是由这张设计图和零号机为基础建造出来的,即时它们各有特色,但它们身上的基本构造和属性都是可以在设计图和零号机身上找到,那么设计图和零号机就是它们的原型对象!

2、原型链

(1)那么,什么又是原型链?

1>.定义:简单来讲就是由多个原型组成的链,对象的__proto__它的是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上找,这就是原型链,当向上找找到Object的原型的时候,这条原型链就结束了。

2>.接着上面的示例,打印结果如下:

3>.根据打印结果可以得出,像Jack.__proto__.__proto__这样层层向上查询,先在实例本身中找,如果没找到就去它的原型中找,还没找到就再往上找,直到找到或抵达终点null。这样像链条一样的关系就是原型链。需要注意的是:所有对象的原型最终都可以上溯到Object.prototype,即Object构造函数的prototype属性。也就是说,所有对象都继承了Object.prototype的属性。这也是所有对象都有valueOf和toString方法的原因,因为这是从Object.prototype继承的。那么,Object.prototype对象有没有它的原型呢?回答是Object.prototype的原型是null。null没有任何属性和方法,也没有自己的原型。。所以原型链的尽头是null。如下图所示:

其实,跟着定义实际写写小demo,打印看看就能简单理解原型和原型链的概念,但知识是浩瀚如海的,本文只是粗浅的简单理解一下原型和原型链的基本知识,更深入的请期待下次,JS原型与原型链(二)。

3、参考资料

(1)MDN:继承与原型链

(2)阮一峰:对象的继承

(3)JavaScript高级程序设计(第三版)

浅谈JS原型与原型链(一)相关推荐

  1. 浅谈js原型和原型链

    一.简述 对于javascript 对象(函数) 原型和原型链的理解,其实不那么难,简单来说,需要理解什么是原型,怎么访问原型,什么是原型链,怎么通过原型链去访问原型,就可以大概理清楚原型和原型链的基 ...

  2. 浅谈JS中常见的问题(三)

    往期文章目录 浅谈JS中常见的问题(一) 浅谈JS中常见的问题(二) JS知识总结 往期文章目录 前言 11. 同步和异步的区别 12. JS 判断变量类型的几种方法 13. 如何阻止事件冒泡与默认事 ...

  3. 浅谈 js 数字格式类型

    原文:浅谈 js 数字格式类型 很多人也许只知道 123,123.456,0xff 之类的数字格式. 其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有 ...

  4. php字面量,浅谈js之字面量、对象字面量的访问、关键字in的用法

    一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...

  5. 浅谈华为如何实现区块链的安全隐私保护

    摘要:区块链节点的租户隔离机制.安全合规性的国密算法支持机制以及范围可验证的同态加密机制下,华为区块链服务的增强安全特性浅谈. 1. 华为区块链服务安全特性介绍 本文介绍华为云区块链服务BCS(Blo ...

  6. 集 承 享——浅谈基于内容的全链档案管理与服务

    2022年4月16日,由中国人民大学电子文件管理研究中心.中国人民大学信息资源管理学院主办的第十二届"中国电子文件管理论坛"成功在京举办.已举办十二届的该论坛是中国电子文件管理领域 ...

  7. 浅谈JavaScript继承与原型链

    对于使用过基于类的语言(如java或C++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,并且本身不提供一个class实现. 在(es5/es6)中引入class关键字,但那只是语 ...

  8. 浅谈软件工程中的“原型开发”

    最近作者在参与一个APP的简单开发项目,关于图书推荐.在进行项目探索的时候,不明确用户需求,不知如何下手,于是便和小伙伴们一起交流,在各个相关软件中寻找灵感,最终慢慢摸索出一个简单粗糙的雏形,这便是原 ...

  9. 浅谈js的常用继承封装和多态

    好久没有写博客了,以前对js的继承都很模糊,最近重新整理了些资料重新温习了一下! 首先什么是构造函数?什么是原型?什么是实例化对像?,继承和实例化对象有什么区别?继承方式有哪些?各自有什么区别和优缺点 ...

最新文章

  1. 修改ActiveProcessLinks链表隐藏进程
  2. PhoneGap与Jquery Mobile结合开发android应用配置
  3. wordpress安装时网页无法打开-调试办法(还没整理完)
  4. Express engine 学习笔记 - 工作在反向代理背后的 Express 设置
  5. Eclipse里做JBPM工作流gpd.xml中文乱码问题解决(包括控制台乱码解决)
  6. 判断字符串是否为空--string.Empty、string=、s.length==0
  7. 输入过滤筛选下拉信息(类似百度输入)
  8. 原创:关于Zend Studio 11.0.2使用localhost无法打开问题,附解决步骤
  9. C++类占字节数讲解
  10. 我最大的乐趣是不厌其烦地收集人生的各种经历和体验。我喜欢享受人生的各种经历和体验所带给我的难以言表的乐趣...
  11. C#中的文件操作 (一)
  12. 美赛只用matlab够,美赛思路
  13. matlab绘制有夹角的2个平面,matlab求两向量夹角
  14. 某企业通达OA任意登录漏洞复现
  15. Oracle效率提升
  16. 你必须知道的指针基础-6.内存的初始化及结构体的使用
  17. 面试题之心理测试题及答案
  18. HP笔记本装XP,‘基本系统设备’驱动的安装
  19. DOTA数据集 | 数据前后处理操作系列
  20. 分销商城是怎么运营?

热门文章

  1. mysql docker 制作_docker 制作自己的mysql镜像
  2. hls fifo_【FCCM2020】HLS 高手对比 Verilog 高手,到底输哪了?
  3. golang 相互引用_golang go run undefined 同一个package中函数互相调用的问题
  4. pde中微元分析法的主要思想_果然是清北学霸,高中数学解题思想与技巧方法,学会不下145分...
  5. 数据库监听触发器java_SqlServer触发器监听数据调用存储器调用java接口
  6. pads最新版本是多少_电路EDA软件究竟有多少?
  7. 打开方式中选择默认方式无反映_Win7系统无法选择打开方式的解决方法
  8. linux下创建多进程,linux之多进程fork:进程创建
  9. 第十六届全国大学生智能车竞赛全国总决赛报名信息汇总
  10. 线性霍尔传感器SS495、A1308、A1302