原型与原型链

首先不得不向大家安利一篇博客，写的非常的明了，我的这篇文章也是借鉴过来的。
javascript中的原型与原型链

什么是原型？

原型：每一个javascript对象（除null以外）在创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，这个原型是一个object空对象，每一个对象都会从原型中“继承”属性。

在这里我们看到构造函数和原型的关系是：

prototype（显式原型）

那么我们怎么从对象中拿到这个原型呢？prototype解决了这个问题，构造函数有这样一个属性，指向了原型。

例如：

		function Stu(name){
            this.name=name;
        }
        console.log(Stu.prototype);

打印出来的结果为：

_ proto _(隐式原型)

这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。

注意：程序员可以直接操作显式对象，但是不能直接操作隐式对象。（ES6之前）

constructor

构造函数可以通过prototype拿到原型，实例可以通过_ proto_ 拿到原型，那么原型怎样拿到我们的构造函数呢？从而用到了constructor属性。

原型的原型

在我们访问实例中的某个属性时，如果没有找到，我们将向上去搜寻实例的原型，假如这个原型也没有呢？我们应该继续去搜索“原型的原型”。

instanceof

在之前的学习中，我们理解的instanceof的含义经常是：用于判断一个对象是否是某个构造函数的实例。
但是在我们学习完原型链之后我们可以更贴切的解释这个概念：用于判断构造函数的prototype属性所指向的对象是否在某个被检测对象的原型链上。

普通使用：

    function Animal() {}
    var a = new Animal();
    console.log(a instanceof Animal); // true

原型使用：

    function Animal() {}
    var a = new Animal();
    function Cat() {}
    
    var c1 = new Cat();
    Cat.prototype = a;
    var c2 = new Cat();

    console.log(c1 instanceof Cat); // false
    console.log(c2 instanceof Cat); // true
    console.log(c1 instanceof Animal);  // false
    console.log(c2 instanceof Animal);  // true

结合原型链图来解释：

在Cat.prototype = a;改变原型指向之后，c1的__proto__任然指向原来的Cat的原型对象，c2在原型指向改变之后创建，其__proto__指向新的Cat原型对象即Animal的实例对象a。

练习题

var F = function(){};
Object.prototype.a = function(){
    console.log('123');
};
Function.prototype.b = function(){
    console.log('456');
}
var f = new F();
F.a();
F.b();
f.a();
f.b();

123
456
123
报错：Uncaught TypeError: f.b is not a function

解析：
1、F.a();F.b();
F 是个构造函数，而 F 是构造函数 Function 的一个实例。因为 F instanceof Object === true 、F instanceof Function === true，由此我们可以得出结论：F 是 Object 和 Function 两个的实例，即 F 能访问到 a， 也能访问到 b。所以 F.a() 输出 123 ，F.b() 输出 456。
2、f.a()；f.b();
f 并不是 Function 的实例，因为它本来就不是构造函数，只能访问到 Object 原型链。所以 f.a() 输出 123 ，而 f.b() 就报错了。
3、分析查找路径
1> F.a 的查找路径：F 自身：没有 —> F.proto(Function.prototype)：没有—> F.proto.proto(Object.prototype)：找到了输出 123
2> F.b 的查找路径：F 自身：没有 —> F.prototype(Function.prototype)：456
3> f.a 的查找路径：f 自身：没有 —> f.proto(Object.prototype)：输出 123
4> f.b 的查找路径：f 自身：没有 —> f.proto(Object.prototype)：没有 —> f.proto.proto(Object.prototype.proto:null)：找不到，报错