在这篇文章里我们将要了解以下几个方面：
关于内存的那点事儿
关于垃圾回收那点事儿
包装对象
什么是原型
什么是原型链
__ 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