新人学习Javascript,其中的原型链一直是云里雾里,不得要领,查了很多相关资料,觉得这遍讲得最为清晰易懂,特转载分享,共同学习。

1. JavaScript内置对象

所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用。例如Array String 等等。JavaScript一共有12内置对象

其中10个函数类型( String,Number,Boolean,Array,Function,Date,RegExp,Error,Object,Event )函数类型 有 __proto__和 prototype 属性

2个对象类型(Math,JSON) 对象类型只有__proto__属性。

下面有一张图片 由苏仔提供。

2. 感性认识JS里的“德罗斯特效应”之原型链

打开浏览器的控制面板,随便输入一个JS内置的构造器函数,比如Array,控制台输出的是一个名为Array的函数体,这好像并没有什么稀奇的,但是,当你接着输入Array.prototype,控制面板输出了一堆我们经常用到的Array构造器的方法,把目光转移到最下方,有一个叫__proto__的属性,好奇的点开。列表列出的不是Object构造器的方法么,里边有我们非常熟悉的hasOwnProperty还有toString等方法。如果Array是构造器,那么控制面板输出的Array.prototype的所有属性中constructor又是什么构造器?点开看看,之后就像身处德罗斯特效应中一样,__proto__和constructor,还有Array构造器中常用的方法名不断的出现,一层套一层,一层层展开,没有尽头。。。

怎么证明 你是你?

拿Array举例,Array.prototype中有一个constructor属性,这个属性的值就是Array构造器自己。 所以我在console里面测试

(每一个构造函数都有)

2、“遗传进化链__proto__”,怎么证明一切皆对象?

所有的JS内置构造器都本是对象。可是从什么线索开始向过去前进呢,原型链(我给他起了一个名字叫遗传进化链)就是突破口。所有JS构造器(当然不止构造器有)都有一个__proto__属性,这是原型链指针,指向遗传进化成它的“那个”。它“遗传”了“那个”的特性,而又进化出了它自有的特性。

这里Array 是内置对象且是函数类型。所以Array有__proto__属性 指向的是函数类型 (function(){})。所以当我们在输出Array.__proto__.proto__;就会返回对象类型(Object{}).但是再向上就null。因为Object就是父类了。所有的继承自Object。

JS内置构造器其中之一的Array原本就是一个函数,而这个函数就是Function的prototype,所以Function.prototype有的方法,JS内置构造器都有,比如call()、apply()、bind()等(其实我们自定义的函数也是继承自Function.prototype,所以我们自己也可以定义构造器)。而Function.prototype的进化链指针又指向了Object.prototype。

3、怎么证明到头来一切都是空?

4、怎么证明所有JS内置构造器和自定义函数都是Function构造器的原型(prototype)。

10个函数类型构造器的进化链指针__proto__指向Function构造器的原型.

这里需要注意所有构造器的prototype都是对象(object)类型,只有Function.prototype是函数(function)类型,这是为了保证函数构造器们的__proto__指向的都是函数。

3. JSON和Math

JS内置的构造器函数都可以使用new关键字实例化一个对象,我们称实例化后的这个对象就是某某构造器的一个实例。就像我们每一个“人”都是“人类”这个构造器函数的一个实例。

我们试试JSON 和Math 能不能实例化对象。

不可以。JSON和Math不是构造器函数,他们是普通的对象。

只有构造器函数才能使用new 关键字实例化一个对象,而JSON和Math已经是对象了,所以我们可以不用实例化直接使用JSON和Math中的属性和方法~~(我们实例化的目就是想用实例化后的对象里的属性和方法,那么既然JSON和Math已经是对象了,就省去实例化的操作 直接使用静态方法。

所以JSON和Math不属于10个构造器函数,但他们12个共同属于Javascript的内置对象。

4. __proto__进化链指针设计为什么如此重要

javascript中为什么会有__proto__原型链的设计。

先实例化一个String对象并将其赋值给str这个变量,然后我们输出这个str

从str输出的内容来看,str有四个属性,分别是0、1、2、length。

但是 str.charAt(0); // l

str里面没有charAt()方法 但是没有报错。这是因为str的进化链上存在这个属性方法,那么charAt()这个方法在进化链的那个节点上呢。

原来String.prototype拥有charAt这个方法,而str的__proto__指针指向String.prototype。str.__proto__.__proto__指向的对象所拥有的属性str也都可以直接用

看到str.__proto__.__proto__指向的对象所拥有的属性中有一个hasOwnProperty属性方法了么,str可以直接使用这个属性方法 在验证之前先说下str.__proto__.__proto__指向了谁?指向的是Object的prototype属性。

Object.prototype.hasOwnProperty()属性方法用来检验一个对象是否自己拥有一个属性而非通过进化链__proto__继承来的属性。

转载于:https://www.cnblogs.com/guchengnan/p/10620980.html

Javascript之傻傻理不清的原型链、prototype、__proto__相关推荐

  1. 一文读懂原型链 prototype和__proto__详解

    目录 1.原型对象 prototype 2.prototype 和 __proto__ 3.原型链 4.补充 5.原型链总结 1.原型对象 prototype 我们首先总结一下原型对象的作用: 原型对 ...

  2. JavaScript进阶学习(二)—— 基于原型链继承的js工具库的实现方法

    文章来源:小青年原创 发布时间:2016-07-03 关键词:JavaScript,原型链,jQuery类库 转载需标注本文原始地址: http://zhaomenghuan.github.io... ...

  3. JavaScript -- 对象与原型链 [[Prototype]]

    一.第三章:对象 1.属性描述符(数据描述符) 可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对 ...

  4. js-4 代理Proxy,object原型链, prototype, 继承,

    1代理Proxy 1.什么是代理Proxy拦截? 可以对对象,函数,数组进行拦截,将其原本的函数操作改写. Proxy在目标对象前设一个拦截层,外界对该对象的访问都必须先通过这层拦截,因此提供了一种机 ...

  5. 原型链prototype和__proto__

    所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法. 显示原型和隐式原型:构造函数的显示原型用来存放函数对象,而实例对象的隐式原型等同于构函数的显示原型.所有 ...

  6. js原型链prototype与__proto__以及new表达式

    对象模型的细节 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model 转载 ...

  7. 作用域链(scope chain)和原型链(prototype chain)

    locate the object in the scope chain, then proceed up the object's prototype chain until the propert ...

  8. JavaScript实现继承机制(3)——通过原型链(prototype chaining)方式

    我们知道在JavaScript中定义类的原型方式,而原型链扩展了这种方式,以一种有趣的方式实现继承机制. prototype 对象是个模板,要实例化的对象都以这个模板为基础.总而言之,prototyp ...

  9. JavaScript 原型对象和原型链

    开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述.有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就 ...

最新文章

  1. java modbus通讯协议_物联通讯协议一(Modbus)
  2. python snap7 plc db_python snap7讀寫s7-1200PLC的數據(PLC的I、Q、M區)
  3. BPMF论文辅助笔记:采样Ui 部分推导
  4. Openwrt系统初始时间
  5. 强大的django-debug-toolbar,django项目性能分析工具
  6. 高效管理论坛广告贴的小窍门
  7. 野生前端的数据结构练习(9)冒泡排序,选择排序,插入排序
  8. 解决Windows 10下MySQL 5.7中文乱码问题
  9. 一个没有经验的前端工程师,写CSS的时候有什么常见通病?
  10. linux-jmeter负载机配置记录
  11. 迅捷PDF转换器特点和使用步骤
  12. 微信公众号普通消息接收接口
  13. Java初始化大乱斗
  14. m基于ACO蚁群优化的FCM模糊聚类算法matlab仿真
  15. VOT 2015 Benchmark 使用教程
  16. MATLAB r2014a 下载+安装+激活
  17. Python爬取动态数据
  18. 数学学习与研究杂志数学学习与研究杂志社数学学习与研究编辑部2023年第3期目录
  19. 【Python金融量化 9- 100 】九、预测股票收益方法总结
  20. 华为防火墙(USG)的管理方式配置

热门文章

  1. 在线编程Python网站,亲测好用
  2. 后台开发,从基础到高级,有什么好的书籍推荐?
  3. 同事有这4个“表现”,你要高看一眼,主动结交,此人不简单
  4. 逆向工程之打造自己的仙剑奇侠
  5. 什么是数据中心代理以及它们如何运作?
  6. 音视频传输中时间戳小头处理方式
  7. 中国菜刀上传一句话木马,巴西烤肉提权
  8. 千锋教育实训day05————java
  9. FreeMarker 数字格式处理
  10. 这次我不再犹豫,也不再退缩,Python,你就是我要带走的剑,与我相伴浪迹天涯的剑