原型链初步学习

作者: 马涛涛_风 | 来源:发表于2018-05-10 10:18 被阅读13次

原型链初步学习

JS标准库里几个构造函数之间的关系

CUnPD1.md.png
每个对象都有toString()valueOf()函数,如果每个对象里都存这样的相同的函数,那会浪费内存.
问题解决方法:原型链

toString()valueOf()等函数单独存放在一个对象里,原来对象里的toString()valueOf()只存地址,指向这个地址

CUnnvd.md.png

当声明对象是,出来自己定义的属性,还有一个隐藏的属性
__proto__ 里面存的是toString()valueOf()等的地址
他的值就是公用属性的值

CUnyPU.md.png CUngxJ.png

共有的属性和方法

在执行o1.toString()是发生的事:
首先看o1
是不是真正的对象,如果不是,就包装成临时对象,用完再回收垃圾,然后进入对象,看他有没有toString方法,如果有特有的toString(),就用,如果没有,就进入__proto__属性去找toString()方法.

CUnbxH.png
说明所有的toString()都是同一个地址
CUnvZt.md.png

__proto__进阶

如果这个对象不是普通对象拥有特有的方法,会一层一层去找

CUuVZq.md.png

代码:


CUuKWF.png

第一层的toString()Number()特有的,可以转换成16进制
toString(16),第二层里面的的toString()是所有对象都有的公共属性.比如找valueOf()如果在第一层里 __proto__ 找不到,就去第二层找.

数字对象普通对象
结构:

CUuseI.md.png

CUugFf.md.png

CUubkV.md.png

原型链

所有的共有属性,,如果没有东西引用他,就会被垃圾回收,那么谁在引用他呢?
答案是 prototype ,prototype的意思是 原型.
所有函数都有protoype属性,包括构造函数.即String(),Number(),Boolean(),Object()protoype
在最开始JS初始化的时候,函数的protoype属性会加载到内存当中

原型===共有属性
Object.prototype意思还是Object的共有属性

CUKp01.md.png CUKQtf.png
Object是构造函数(JS里函数也是一种对象,也可以有方法,可以 有属性)
函数名字加()就是执行.

CUKNBn.md.png
Number的共有属性

共有属性的共有属性


CUKtns.png CUKwNV.png

其他String,Boolean原型也是一样

CUKD9U.png

new做的事情,一创造一个哈希,二绑定原型(共有属性),即把__proto__指向该有的共有属性,也就是原型

__proto__prototype的关系

[__proto__指向prototype],

在无代码情况下
window里面有Number属性(函数也是对象,也可以有属性)
实际上为
Number:function Number(){}这个

CUMPDs.md.png

无代码的时候,即为下面这样,浏览器已经将其初始化好了.

CUMe8U.md.png
可以看到prototype用来指向这些共有属性的,不然这些共有属性就被垃圾回收了,所以要用一个线来牵引着.
如图
CUMyPf.md.png

写了代码之后

CU8HKS.md.png
所以:
  • prototype是浏览器开始就准备好了的,用来防止共有属性被垃圾回收的,

  • __proto__是在开始写代码的时候用来引用共有函数的.

  • String.prototypeString的公用属性的引用,是JS在初始化的时候就已经存在的,用他是因为如果不用他,那么公用属性就跑了,被垃圾回收了

  • 's'.__proto__String的公用属性的引用,是在声明新对象的时候存在的,有他是因为我要用他,用公用属性

共同点就是都是公共属性的引用.

var o1 = {};

o1.__proto__ ===  Object.prototype//true

Number.prototype.__proto__===Object.prototype//true

var s1 = new String('s1');

s1.__proto__ === String.prototype//true
CUGE5R.png

对象与构造函数

CUYgDU.md.png
形式

总结的式子

CUYI81.png
只有函数才能有prototype
两个属性对比:
共同点:存的地址相同,都指向同一个对象
不同点:一个是对象的属性,一个是函数的属性
面试题:
1
'1'.__proto__
'1'会创建一个临时String对象,然后指向String.prototype

2
函数.prototype 是一个对象,那么

var obj = 函数.prototype;
obj.__proto__ === Object.prototype;//true
函数.prototype.__proto__ === Object.prototype;//true

成立(可以看上图无代码的时候)

Number.prototype.__proto__ === Object.prototype
//true
String.prototype.__proto__ === Object.prototype
//true
Boolean.prototype.__proto__ === Object.prototype
//true

成立

相关文章

  • 原型链初步学习

    原型链初步学习 这篇博客只是我初步理解原型链的一个个人学习笔记,写的比较粗略,且有的地方可能理解错误. 更多更专业...

  • 区块链最新资讯

    央行数字货币原型方案初步确定系统预计春节后推出 央行基于区块链的数字货币研究已取得阶段性成果,原型方案已初步确定,...

  • 2-6 原型和原型链 - 5个原型规则

    2-6 原型和原型链 - 5个原型规则 5条原型规则,原型规则是学习原型链的基础。 第一、所有引用类型(数组、函数...

  • 前端JS基础二(原型与原型链)

    原型与原型链 原型规则(是学习原型链的基础) 所有的引用类型(数组,对象,函数),都具有对像特性,即可自由扩展属性...

  • JavaScript原型对象与原型链

    一、前言 原型和原型链是 JavaScript中不可避免需要碰到的知识点,在刚开始学习 JS 时,原型和原型链都是...

  • 初识JS原型与原型链

    对于第一次学习JS的人说,原型与原型链是两个绕不开的概念,这既是难点也是重点。下面我们来初步认识一下这两个概念,从...

  • 深入javascript之原型和原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 央行数字货币原型有望年后推出

    据21世纪经济报道,央行基于区块链的数字货币原型方案已初步确定,法定数字货币的原型系统Demo有望在春节后推出。 ...

网友评论

    本文标题:原型链初步学习

    本文链接:https://www.haomeiwen.com/subject/tcqzrftx.html