三篇文章都更新完毕，完整的剖析了 JS 原型与原型链，希望通过这些教程能让你对 Javascript 这门语言理解的更透彻！
一. 普通对象与函数对象
JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明
var o1 = {};
var o2 =new Object();
var o3 = new f1();
function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof f1); //function
console.log(typeof f2); //function
console.log(typeof f3); //function
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object
在上面的例子中 o1 o2 o3 为普通对象，f1 f2 f3 为函数对象。怎么区分，其实很简单，凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。
一定要分清楚普通对象和函数对象，下面我们会常常用到它。
二. 构造函数
我们先复习一下构造函数的知识：
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() { alert(this.name) }
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');
上面的例子中 person1 和 person2 都是 Person 的实例。这两个实例都有一个 constructor （构造函数）属性，该属性（是一个指针）指向 Person。 即：
console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true
我们要记住两个概念（构造函数，实例）：
person1 和 person2 都是 构造函数 Person 的实例
一个公式：
实例的构造函数属性（constructor）指向构造函数。
三. 原型对象
在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。（先用不管什么是 __proto__ 第二节的课程会详细的剖析）
function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age = 28;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function() {
alert(this.name);
}
var person1 = new Person();
person1.sayName(); // 'Zaxlct'
var person2 = new Person();
person2.sayName(); // 'Zaxlct'
console.log(person1.sayName == person2.sayName); //true
我们得到了本文第一个「定律」：
每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性
那什么是原型对象呢？
我们把上面的例子改一改你就会明白了：
Person.prototype = {
name: 'Zaxlct',
age: 28,
job: 'Software Engineer',
sayName: function() {
alert(this.name);
}
}
原型对象，顾名思义，它就是一个普通对象（废话 = =!）。从现在开始你要牢牢记住原型对象就是 Person.prototype ，如果你还是害怕它，那就把它想想成一个字母 A： var A = Person.prototype
在上面我们给 A 添加了 四个属性：name、age、job、sayName。其实它还有一个默认的属性：constructor
在默认情况下，所有的原型对象都会自动获得一个
constructor（构造函数）属性，这个属性（是一个指针）指向prototype属性所在的函数（Person）
上面这句话有点拗口，我们「翻译」一下：A 有一个默认的 constructor 属性，这个属性是一个指针，指向 Person。即：
Person.prototype.constructor == Person
在上面第二小节《构造函数》里，我们知道实例的构造函数属性（constructor）指向构造函数 ：person1.constructor == Person
这两个「公式」好像有点联系：
person1.constructor == Person
Person.prototype.constructor == Person
person1 为什么有 constructor 属性？那是因为 person1 是 Person 的实例。
那 Person.prototype 为什么有 constructor 属性？？同理， Person.prototype （你把它想象成 A） 也是Person 的实例。
也就是在 Person 创建的时候，创建了一个它的实例对象并赋值给它的 prototype，基本过程如下：
var A = new Person();
Person.prototype = A;
结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。
原型对象其实就是普通对象（但 Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有prototype属性））。看下面的例子：
function Person(){};
console.log(Person.prototype) //Person{}
console.log(typeof Person.prototype) //Object
console.log(typeof Function.prototype) // Function，这个特殊
console.log(typeof Object.prototype) // Object
console.log(typeof Function.prototype.prototype) //undefined
Function.prototype 为什么是函数对象呢？
var A = new Function ();
Function.prototype = A;
上文提到凡是通过 new Function( ) 产生的对象都是函数对象。因为 A 是函数对象，所以Function.prototype 是函数对象。
那原型对象是用来做什么的呢？主要作用是用于继承。举个例子：
var Person = function(name){
this.name = name; // tip: 当函数执行时这个 this 指的是谁？
};
Person.prototype.getName = function(){
return this.name; // tip: 当函数执行时这个 this 指的是谁？
}
var person1 = new person('Mick');
person1.getName(); //Mick
从这个例子可以看出，通过给 Person.prototype 设置了一个函数对象的属性，那有 Person 的实例（person1）出来的普通对象就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。
小问题，上面两个 this 都指向谁？
var person1 = new person('Mick');
person1.name = 'Mick'; // 此时 person1 已经有 name 这个属性了
person1.getName(); //Mick
故两次 this 在函数执行时都指向 person1。
2017-10-27 更新：
下面的评论有喷子喷我：「null 没有 _proto_」，下面解释一下：
null 是一个独立的数据类型，为什么typeof(null)的值是"object"？
- null不是一个空引用, 而是一个原始值, 参考ECMAScript5.1中文版** 4.3.11节; 它只是期望此处将引用一个对象, 注意是"期望", 参考 null - JavaScript**.
- typeof null结果是object, 这是个历史遗留bug, 参考 typeof - JavaScript**
- 在ECMA6中, 曾经有提案为历史平凡, 将type null的值纠正为null, 但最后提案被拒了. 理由是历史遗留代码太多, 不想得罪人, 不如继续将错就错当和事老, 参考 harmony:typeof_null [ES Wiki]
作者：克荷林链接：https://www.zhihu.com/question/21691758/answer/987822
写个教程不容易，遇到喷子真心不爽。喷子不管那么多，哪怕文章是免费看的。他们只要抓住你一点点的小失误，就兴奋的噼里啪啦一顿喷。
别着急走，关于原型与原型链还有第二篇第三篇呢~
第二篇已更新，点击进入
第三篇已更新，点击进入
本文部分参照了 JS原型与原型链终极详解 （感谢原作者）（侵立删）
和《JavaScript 高级程序设计》第三版
希望通过这一系列课程，能帮助你彻底搞明白 JavaScript 的原型与原型链 ：）
网友评论
有个问题 三、原型对象里
Person.prototype.constructor == Person 我打印出来的值不是true 这有点懵了..
结论：原型对象（Person.prototype）是 构造函数（Person）的一个实例。
岂不是Person.prototype的__proto__还是指向Person.prototype,然而并不是，应该指向的是Object.prototype, Person.prototype.__proto__ === Object.prototype //true
我们得到了本文第一个「定律」：
每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性；
什么逻辑？？呵呵
var A = new Person();
Person.prototype = A;
这两段代码是什么操作？？？
person.prototype=A.__proto__
“这两个实例都有一个 constructor （构造函数）属性，该属性（是一个指针）指向 Person“
“ console.log(person1.constructor == Person);//true“
“console.log(person2.constructor == Person); //true”
我觉得这里的说法有点出入
如果直接打印person1和person2对象，就会发现并没有发现有constructor属性。打印内容如下
{age:28
job:"Software Engineer"
name:"Zaxlct"
sayName:ƒ ()
__proto__:Object}
那为什么person1.constructor == Person 这个会是true，实际是因为在person1中没有找到constructor属性，顺着__proto__往上，找到了Person.prototype，而在这里才找到的constructor，而这个constructor是指向Person的，所以结果才会是true
但是这并不能说是实例上有一个constructor属性，我觉得这容易产生误解。
以上是个人观点，有错误请指正，谢谢。
《我们得到了本文第一个「定律」：
每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性》
function Person(){}
Person.prototype instanceof Person //false
构造函数的原型对象是构造函数的一个实例，这个有点不明白
Person类型是function
楼主贴出的最后两张图
new person();
p应该是大写吧
第一步： let A = { };
第二步： A.__proto__ = Person.prototype;
第三步: Person.cal(A);
第四步： return A。
并没有你在上面说的Person.prototype = A这么一步流程；如果要说是大致是这么个过程的话，其实也不对，因为他们两个是独立的关系[ 硬要说有关系的话，应该是A包含Person.prototypr ]。至于为什么原型对象上有constructor，我觉得没必要解释，或者可以看一下我在下面37楼评论的回复。它就是内置的默认属性，如果要搞事情的话，可能还会问：为什么对象都有__proto__属性？本来就是js语言内置的默认属性，该怎么解释呢？楼主可以在这个地方考虑修改一下，因为我一开始看到你这个表达式不得不说有点懵逼。。。
提问：原型对象 是 构造函数 的实例的公有属性与方法是否正确。如果正确的话，是否原型对象 仅仅是 构造函数的实例的一部分呢（公有部分）？
person1.constructor == Person
Person.prototype.constructor == Person
这两个都是true，为什么person1 == Person.prototype;这个却是false呢，我还是稍微有点不明白。请指教一下，谢谢了。
person2.constructor == Person // true
person1 == person2 // false
对这句话有点疑惑， Person.prototype仅仅是一个名为“原型”的对象，但应该不能说是Person的一个实例吧？
实验：实例的__proto__指向这个“原型”，但Person.prototype里的__proto__并没有指向该“原型”
所以这篇文章的这个标题还是算了吧。
在上面第二小节《构造函数》里，我们知道*实例的构造函数属性（constructor）指向构造函数 * ：person1.constructor == Person。
我的理解是：
实例的构造函数属性指向原型的构造函数属性（constructor）指向的构造函数（Person）。
你看后面有个例子与你说的观点是矛盾的：
function Person(name) {
this.name = name
}
// 重写原型
Person.prototype = {
getName: function() {}
}
var p = new Person('jack')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // false
建议作者可以及时修改，不然不严谨，对我这样的小白还是有点儿误导作用的。文章挺不错字的，思路清晰。
这里写错了，sayName写成了sayname所以是true,正确应该是false,
this.name = name; // tip: 当函数执行时这个 this 指的是谁？
};
Person.prototype.getName = function(){
return this.name; // tip: 当函数执行时这个 this 指的是谁？
}
var person1 = new person('Mick'); 这里在person中大小写打快了吧 'p'=>'P'
person1.getName(); //Mick
我发现了一处笔误
function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age = 28;
Person.prot```e```type.job = 'Software Engineer';
Person.prototype.sayName = function() {
alert(this.name);
}
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() { alert(this.name) }
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');
这段代码的person1 是普通对象！！！
怎么解释？？？
this.b=b;
console.log(this);
console.log(this.b);
}
我用的这段在console里面打印，第一个this打印出来是window对象啊。
是我没理解对吗？
（我们要记住两个概念（构造函数，实例）：
person1 和 person2 都是 构造函数 Person 的实例
一个公式：
实例的构造函数属性（constructor）指向构造函数。）这个总结好像有问题......
是否该为：只有构造函数有prototype 属性！
var A = new Person();
Person.prototype = A;
function Person(name){
this.name = name
}
Person.prototype instanceof Person //false
为什么说是构造函数的实例呢？
我刚学这个 所以可能没完全理解 也没有表达好 求解惑😞