JS(五）原型与原型链

在这篇文章里我们将要了解以下几个方面：

• 关于内存的那点事儿

• 关于垃圾回收那点事儿

• 包装对象

• 什么是原型

• 什么是原型链

• __ proto __和prototype

一、关于内存那点事儿

我们经常会想，当我们声明并赋值一个变量时，存储的状态是如何的，我们再行调用时又是一套什么操作呢？

我们来假设一下，如果计算机内存有2G，开机后，操作系统分配到了512M，浏览器分配到了1G，假设除去各种页面html等等内存分配外，JS分配到了100M，那这100M如何分配？

是这样的，它划分了两个区，我们简单称其为代码区和数据区，代码区来存储代码，数据区来存储赋值的数据。

比如下列代码：

var a = 1// 代码区 存储a// 数据区 存储1

代码区和数据区又存在着引用关系，比如我们只要访问a，就可以读取到1.

在JS中，每一个数据都需要一个内存空间。内存空间又被分为两种，栈内存(stack)与堆内存(heap)。

数据区内也分了两个区，栈（stack）内存和堆（heap）内存，如下图所示：

image

我们接下来就看一下数据区。

继续重温7种数据类型：
Number，String，Boolean，null，undefined：简单类型数据存在stack内存中
Object：复杂类型数据存储在heap内存中

JS里所有的数字都是以64位浮点数储存的，16位存储一个字符，所以在栈内存内都是64位01

我们来看看代码：

//代码var a = 1var b = 2var c = true// 代码区              //stacka                      0000…1…000000（64位浮点数）
b                      0000…10…000000（64位浮点数）
c                      100000000000……（64位浮点数）

假设b=a,那就把a存的东西复制然后覆盖到b储存的地方。

再复杂一点，我们存储复杂类型呢？也就是heap内存里是怎样呢？

// 代码var o = {    name:'vava'
    age:18}
o.gender = femalevar o2 = {    name:'yaya'}// 代码区              //stack                  //heap
   o                   ADDR 88                 88:name:'vava'  
                                                  age:18
                                                  gender:'female'
   o2                  ADDR 26                 26:name:'yaya'

就像上述代码，当需要存储字符的时候，一行64位浮点数，只能存储4个字符，非常浪费且再添加属性的时候就需要整体移动下位的代码，很麻烦，所以我们就在栈内存里存储一个地址，地址随意，但是这个地址指向heap内存里相应地址的位置，而我们需要储存的内容就写在这里。

如果上述代码内，令o2=o, 那么同理，复制o的存储内容覆盖到o2,也就是，o2的地址26被88覆盖，o2指向88，将引用88的内容。

上述代码即下图：

image

ps：没有什么是画个图解决不了的 ~ 遇到内存空间问题，放心大胆的画图看看吧~

二、关于垃圾回收（GC）的那点事儿

1、Garbage Collection

我们已经知道程序的运行需要内存。但是如果我们不再用到的内存呢？如果不释放，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。所以我们页面用完就要释放内存，让其重新分配。

如果一个对象没有被引用，它就是垃圾，就会被回收。

// 代码var a = {name:'vava'}var b = {name:'haha'}// 代码区                    // stack                  //Heap
    a                        ADDR 67                   67:vava
    b                        ADDR 17                   17:haha// 当a = b //代码区                     // stack                  //Heap
    a                        ADDR 17                   (67:vava 被回收)
    b                        ADDR 17                   17:haha

可以看到，一开始a指向地址67，b指向地址17，当a=b，b的地址覆盖过来，a和b指向地址17,地址67不再被引用，所以被回收。

2、内存泄漏：不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）

即由于浏览器的一些bug，使得该被标记为垃圾回收的东西没有被当做垃圾回收，内存始终被占用着，没有被释放。

比如我们有一个document.body.onclik事件占用着内存，没有被清除，我们可以如下操作：

window.onunload = function(){       document.body.onclik = null}

注意，还有其他事件的话，其他事件都要=null。

3、深拷贝V.S浅拷贝

var a = 1var b = a
    b = 2
    a    // 1

像这样，b改变不会影响a，这就是深拷贝

对于所有的基本类型，赋值都是深拷贝，所以我们来研究对象。

image

// 代码区         // stack              //heap
    o             ADDR 9              9:name:'yaya'
    b             ADDR 9              // 也指向地址9

如上述，b.name = 'maya' ，改变name的值，是在地址9中完成，这时o和b都指向地址9，所以，引用a,得到的也是改变后的。

像这样，b的改变会导致a的改变，就是浅拷贝。

三、包装对象

我们都知道对象是一种复合值：它是属性或已命名值得集合。当属性值为一个函数时称之为方法。那么我们来看一下下图：

image

我们可以看到字符串也同样具有属性和方法，但字符串既不是对象，怎么会有属性呢？

其实只要我们引用上述字符串的属性，JavaScript就会将字符串值通过调用new String(s)的方式转换成对象，之歌对象继承了字符串的方法，处理属性的引用。属性引用结束，这个新创建的对象就被销毁。

我们可以这样来想，我们既想用简单类型，又想获得对象的方法，然后Branden Eich就想了个办法，我们可以建立临时对象，获取属性后返回给调用，然后销毁就可以。

var n = 1n.toString()// '1'// 代码区             // stack               // heap
   n                     1
   temp                  ADDR 77             77: 1
                                                 toSting()
                                                 valueOf()

temp就是临时对象，当调用toString返回后，temp马上被销毁了。

其他的数据类型也是一样，

image

调取属性的背后都是这样一套操作。

四、什么是原型

从上一节包装对象我们可以看到，利用new创建并初始化一个新对象，运算符new后面跟着一个函数调用，叫做构造函数。

var s = new String('hello')

如上述代码，s就是被创建的实例对象，new运算符后跟着的String(注意这里开头必须大写来和string区分)就是构造函数。

我们可以看到从实例对象中调用的属性，但是他们都具有的属性比如toString以及valueOf等，如果每个实例对象都在heap存储处生成这些都有的属性岂不是很费内存？所以我们可以共有属性归拢起来，然后通过 __ proto__ 来指向共有属性。

var o = new Object({name:'vava'})//代码区             // stack             //heap
   o                    ADDR 89           89: name:vava             object:toString()
                                              __proto__:object              valueOf()
                                                                            ……

所以在公有属性调用时就是上述操作

image

image

通过在console.log打印出来，我们可以看到一个哈希，__ proto__指向了object去调用属性。

object公有属性是所有对象的公有属性，但是还有一些比如是只有number数据类型共同具有的，或者只有String数据类型共同具有的呢？我们来看一下：

image

image

image

明白了么？也是一样的操作去调用，只不过实例对象通过__ proto__先调用number公有属性.如果没有要调用的属性，就继续通过__ proto__调用object公有属性。

看到这你可能想问了，说了这么多跟原型有什么关系呢？当然有了，公有属性就是原型，每一个对象都在原型继承属性，所有的函数对象都具有原型对象，并且通过JavaScript代码Object.prototype来获得对属性的引用。

image

看上图就可以了解到，构造函数通过new运算符创建了实例对象，实例对象内通过__ proto__指向了原型对象即Object.prototype.

image

当你声明了一个对象，JS引擎除了在栈里搞了一个哈希，还干了一件事，那就是把__ proto__指向了公有属性，即原型。

五、什么是原型链

原型链：每一个对象都有自己的原型对象，原型对象本身也是对象，原型对象也有自己的原型对象，这样就形成了一个链式结构，叫做原型链。

比如下面这个原型链

实例对象s---（通过__ proto__）-->String.prototype---（通过__ proto__）---->Object.prototype----（通过__ proto__）----->null

对这个实例化对象而言，访问对象的属性，是首先在对象本身去找，如果没有，就会去他的原型对象中找，一直找到原型链的终点null；根据定义，null没有原型，并作为这个原型链中的最后一个环节。

六、__ proto__和prototype

var 对象 = new 函数() ， 故而

对象.__ proto__ === 函数.prototype

__ proto __是实例对象的公有属性引用，prototype是函数对象公有属性的引用。

1、函数.prototype.__ proto __ ===Object.prototype

image

这里我们循着原型链就可以理解，当函数是Object，它的原型对象自然指向了原型链的终点null。

2、函数.__ proto __ === Function.prototype

image

Function是Object的构造函数，所以函数Object或者函数Number等等，他们的__ proto __ 都指向了Function.prototype

从上图中有清晰的对比，实例对象o的__ proto __ 就指向了构造实例对象函数的原型对象，即Object.prototype.而函数Object的__ proto __ 就指向了它的构造函数Function.prototype.

所以接下来两个推论我们也很容易理解了：

3、Function.__ proto __ === Function.prototype

4、Function.prototype.__ proto __ === Object.prototype

(这里Function.prototype是对象，原型对象）

tips:
1、每一个构造函数都拥有一个prototype属性，这个属性指向一个对象，也就是原型对象。当使用这个构造函数创建实例的时候，prototype属性指向的原型对象就成为实例的原型对象。
2、原型对象默认拥有一个constructor属性，指向指向它的那个构造函数（也就是说构造函数和原型对象是互相指向的关系）。
3、每个对象都拥有一个隐藏的属性[[prototype]]，指向它的原型对象，这个属性可以通过 Object.getPrototypeOf(obj) 或 obj.__proto__ 来访问。
4、实际上，构造函数的prototype属性与它创建的实例对象的[[prototype]]属性指向的是同一个对象，即 对象.__proto__ === 函数.prototype 。
5、如上文所述，原型对象就是用来存放实例中共有的那部分属性。
6、在JavaScript中，所有的对象都是由它的原型对象继承而来，反之，所有的对象都可以作为原型对象存在。
7、访问对象的属性时，JavaScript会首先在对象自身的属性内查找，若没有找到，则会跳转到该对象的原型对象中查找。

作者：饥人谷_陈杨
链接：https://www.jianshu.com/p/b88aaa033452