你真的完全理解原型与原型链？
前言：原型与原型链两个名词对于大部分的前端初学者来说，对这两个概念很模糊，无从入手，而且还可能会一脸懵逼，本人不才，准备介绍一下原型以及原型链。本文从下面几个方面讲解，然后在深入讲解原型与原型链的相关知识。
- 全局对象
- 简单类型与对象
- Number、Boolean、String、Object四个对象
- （共用属性）原型
-
__proto__与 prototype - 烧脑的等式
- 奇葩的Function
全局对象Window
ECMAScript 规定全局对象叫做 global，但是浏览器把 window 作为全局对象（浏览器先存在的）
| ECMAScript规定 | 浏览器自己加的属性（私有） |
|---|---|
| parseInt | alert |
| parseFloat | comfirm |
| Number | console.log |
| String | console.dir |
| Boolean | document |
| Object | history |
注：
- window对象中的所有方法都可以省去window，alert()方法可以写成window.alert()，或者省去window，直接写做alert()
- 浏览器自己加的属性，因为没有标准，所以浏览器上呈现的效果是不一样的
简单类型与对象
声明一个数值类型的变量
//声明简单的数据类型
var n1 = 1;
//声明一个对象，可以用n2.toString()将其转换成字符串
var n2 = new Number(1);
下面通过内存图查看它们之间的区别
简单类型与对象.png
它们在内存中的存储方式是不同的，n1是直接声明简单的数据类型（number），存储在stack栈内存中，而n2是声明了一个对象stack内存中存储着该对象的内存地址，对象的内容存储在heap堆内存中。
但是在平常写代码的时候我们没有使用n2的写法，也可以使用valueOf() 方法 和toSting()方法,这里有一段黑历史（JS之父为了满足Boss的需求，为了让JavaScript长得像Java），可以自行google
原因是：JS使用妙计：临时转换（用完了就没了），如果你使用n1的写法，调用了了如valueOf方法，那么JS会创建一个临时的对象，然后调用该对象的方法，调用结束后临时对象就会被垃圾回收掉。
踩坑时间到：
var n =1;
n.xxx = 2;
//①n.xxx = 2;会报错吗？
//n.xxx的值是多少？
你觉得是结果会怎样，下面就来揭秘啦
答案：n.xxx = 2;这句话不会报错,执行这句话时，JS会创建一个临时对象，为临时对象添加属性，执行这句话后，临时对象就会被回收，如果再执行n.xxx，结果是undefined，因为给n添加完属性后临时对象就会被回收，n本质上还是一个数值，没有临时对象，再去重新创建一个新的对象，里面没有这个属性（有个这属性的对象已经被删了）。
Number对象
| Number的常用属性 | 含义 |
|---|---|
| Number.valueOf() | 获取对象本身的值 |
| Number.toString() | 将数值转化为字符串 |
| Number.toFixed() | 将其转换为小数 |
| Number.toExponential() | 将其转化为科学计数法 |
如：
var n2 = new Number(1);
n2.toString(); //"1"
n2.valueOf(); //1
n2.toFixed(2); //"1.00"
n2.toExponential(); //"1e+0"
注：number类型的的toString方法可以加参数，表示按照什么进制来解析（不加参数默认按十进制解析），如：
(100).toString(16); //"64"
(100).toString(2); //"1100100"
String对象
| String的常用属性 | 含义 |
|---|---|
| String.charAt() | 获取字符串中某一位的字符 |
| String.charCodeAt() | 获取字符串中某一位的字符的Unicode编码 |
| String.trim() | 删除字符串中多余的空格 |
| String1.concat(String2) | 连接字符串1和字符串2 |
| String.slice(start,end) | 切片，截取字符串（包前不包后），从start到end |
| String.replace('e','o') | 将字符串中的e替换成o(只能替换第一次出现的字符) |
| String.indexOf() | 搜索字符串中的内容(只检测到第一次出现的字符)，没搜到返回-1 |
| String.split() | 分隔 |
| String.substr(start[, length]) | 截取,返回一个字符串中从指定位置开始到指定字符数的字符 |
如：
var s = new String('hello World');
//获取字符串中某一位的字符
s.charAt(1) ; //"e"
//获取字符串中某一位的字符的Unicode编码
s.charCodeAt(0); //104
//删除字符串中多余的空格,是左右两面的空格
s.trim(); //"hello World"
//连接字符串1和字符串2,字符串1和字符串2是没有被改变的
var s1 = "hello";
var s2 = " world";
s1.concat(s2); //"hello world"
console.log(s1); //"hello"
console.log(s2); //" world"
//切片，截取字符串（包前不包后），从start到end
s.slice(0,2); //"he"
//将字符串中的e替换成o(只能替换第一次出现的字符)
s.replace('e','o'); //"hollo World"
//搜索字符串中的内容(只检测到第一次出现的字符)，没搜到返回-1
s.indexOf('s') //-1
//根据字符串中间的空格分隔字符串，变成数组
s.split(); //["hello World"]
//返回一个字符串中从指定位置开始到指定字符数的字符
s.substr(0); //"hello World"
s.substr(0,5); //"hello"
Boolean对象
介绍一个两种不同的赋值方法下容易出错的地方。
var f1 = false;
var f2 = new Boolean(false);
if(f1) { console.log('1') } ;
if(f2) { console.log('2') } ;
注：
f1和f2的值都是false，但是f2是对象，一切对象（不论是否是空对象）都是truey，所以使用if判断语句，会将f2转化为了true，打印出2
Object对象
Object对象，两种赋值方法是一样的，没有任何区别。
注：
var obj1 = {};
var obj2 = {};
obj1 === obj2; // false
为什么obj1不恒等于obj2？？？同样都是空独享，但是它们在stack栈内存中存储的内容是heap堆内存中的地址，每个对象的内容在heap内存中的地址是不会一样的，所以对象与对象一般都是不相等的。（除非你将一个对象的内存地址复制给另一个对象）
敲黑板，重头戏来了
原型/共用属性
所有对象都有 toString 和 valueOf 属性，那么我们是否有必要给每个对象一个 toString 和 valueOf 呢？答案是不需要的。因为JS每次声明一个对象都要写一次这些方法这样写的话会非常占用内存，而且内存还那么贵，所以JS 的做法是把所有的对象共用的属性全部放在heap堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性，就是传说中的原型
原型的目的：可以减少不必要的内存浪费
如：
var s1 = new String('hi');
var s2 = new String('he');
var n1 = new Number(1);
var n2 = new Number(2);
var b1 = new Boolean(true);
var b2 = new Boolean(false);
var o1 = {
name: 'xiao',
age: 6
}
var o2 = {
name: 'ming',
age: 18
}
根据下面内存图分析原型
原型.png
图中红色的箭头（不是很明显，是有两个箭头的），所连成的线，就组成了一条原型链。
-
__proto__就是这些共用属性的引用。 - 声明Number对象、String对象、Boolean对象时，如声明Number对象，在stack栈内存中存储着该对象的内存地址，对象的内容存储在heap堆内存中。对象的内容里面有
__proto__，它指向的Number的共用属性（Number.prototype）。
某些等式：
//对象的__proto__指向Object对象的prototype
var o1= {};
o1.__proto__ === Object.prototype;
var n1 = new Number(2);
//数值的__proto__指向Number对象的共用属性
n1.__proto__ === Number.prototype;
//Number对象的共用属性的__proto__指向Object对象的共用属性。
n1.__proto__.__proto__ === Object.prototype;
其他对象也可以得出类似的等式
__proto__ 与 prototype
prototype是浏览器本身就写好的.png
上图是我们还没有写代码的时候,浏览器都已经初始化好了，prototype是浏览器提前准备好的。
当我们写代码的时候：
var s = new String(' hello ') ;
我们创建的对象的__proto__ 会用来指向原有的String对象，使得我们可以调用String对象的公有属性。
总结：
-
__proto__是某对象的共用属性的引用，是为了用户使用其共用属性中的方法而存在的 。（使用的） - prototype 是浏览器写的，本身就存在，是某对象的共同属性的引用，为了不让对象的共用属性因没有被调用而被垃圾回收而存在。（防止回收）
一些烧脑的等式
通过var 对象 = new 函数；推出其他烧脑的等式
var n = new Number(1);
//var 对象 = new 函数；
//对象的__proto__最终指向某对象的共用属性，构造某对象的函数的prototype也指向某对象的共用属性
//__proto__ 是对象的属性，prototype是函数的属性
对象.__proto__ === 函数.prototype
//函数的prototype是对象，这个对象对应的就是最简单的函数Object
函数.prototype.__proto__ === Object.prototype
//由于函数本身即是函数（最优先被视为函数），也是对象，而函数的构造函数是Function
函数.__proto__ === Function.prototype
//Function即是对象，也是函数，但他优先是个函数
Function.__proto__ === Function.prototype
//Function.prototype也是对象，是普通的对象，所以其对应的函数是Object
Funciton.prototype.__proto__=== Object.prototype
奇葩的Function
我们经过上面的推导，发现Function，他即是函数，也是对象，所以他有函数的prototype，也有对象的__proto__，即Function.prototype 与Funciton.__proto__互相引用。
注：
Object.__proto__ === Function.prototype，因为 Function 是 Object 的构造函数。
参考资料：
初识传说中的原型与原型链
