图解原型和原型链(二)

前言:本篇以上一片篇基础,逐渐引出_ _ proto_ _和prototype的概念。而且还是那句话,初学者抛开你们之前看到的各种有关于原型原型链的概念,那种很正经的概念很容易把人绕晕。最后画图不易,转载请注明出处。谢谢~

关键词:_ _ proto_ _,prototype......
正文:
既然是图解,那我们就直接上图来说明,简单易懂。
现在,我们还是承接上文,
1、
现在有s,b,o三个对象,按照文章一所说,那他们每一个相对应的堆里面都有一个toString和valueOf。发现有什么问题了吗,看内存图吧。

var s = new String('Hi');
var b = new Boolean(true);
var o = new Object();

内存图一:


pro2-1.png

好吧,那既然这样,我们就把它提出来就好喽,:


pro2-2.png

2、想知道js里具体咋用看这里~~

var o = new Object();
o1.name = "beyrl"
o1.age = "18"

内存图二:


pro2-3.png

当当当当~~,
就是这样一个隐藏属性指向了这个公用属性。那这样一个proto是不是有在哪里见过的感觉呢,看下图~

image.png

好,有没有一个大概了解呢,先出一道题考考你们:
eg:
问:1、o1 === o2? 2、o1.toString === o2.toString ?

var o1 = new Object()
var o2 = new Object()

这种问题怎么回答呢,那我们还是来画内存图吧,听我的,不会就画图。


Pro2-4.png

从这个内存图中,我们可得知,A1肯定和A2不等,所以,o1和o2肯定就不一样。但是o1.toString和o2.toString都是指向了公用属性的toString(),所以肯定相等。


3.到这里,你们应该对这个proto有一个基本的印象了。但是现在,我有一个问题要问你们,一个Number,应该还会有很多除了toString(),valueOf()等其他的方法,比如说,有些人知道还有toFixed等等。那这些专属于number的这些方法,去哪了呢?老办法,内存图:

var n1 = new Number()
var o1 = new Object()
pro2-5.png

4.上面只列举了一个number共有的,内存图,而事实上还有String共有的,布尔Boolean共有的,,,大概就是如下的一个内存图:


pro2-6.png

再来一个比较形象些的:


image.png

那object的共有属性,String的共有属性,number的共有属性,Boolean的共有属性,这些本质上都是哈希,那这些属性是怎么出现的?我的意思是,是不是在一开始浏览器就把他们准备好了呢?
现在,要想起我在浏览器的垃圾回收机制中的知识点:

如果一个哈希没有被引用,那么就要被浏览器的垃圾回收机制回收。

那么现在问题来了,到底是谁在引用它们,导致他们没有消失呢?就是这个:


image.png

说白了,object.prototype就是object的共有属性,换一个名字就叫做

原型
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,195评论 0 13
  • 全局对象 windowECMAScript 规定全局对象叫做 global,但是浏览器把 window 作为全局对...
    半斋阅读 464评论 0 0
  • JS中原型链,说简单也简单。 首先明确: 函数(Function)才有prototype属性,对象(除Object...
    前小白阅读 3,944评论 0 9
  • 最近有一部电影叫做(一条狗的使命)挺火的,有时间得抽空看看。因为对狗的喜欢,让我以前有时间就看关于狗的电影,比如说...
    灰姑娘玻璃鞋阅读 274评论 0 1
  • 2016年7月7日,在由中国福利会、上海静安区人民政府等共同主办的首届上海国际少儿生活方式展上,一群身高管理师意外...
    身高管理师阅读 754评论 0 0