javascript原型的理解

原型：每个函数都有一个特殊的属性叫作原型（prototype）

我们可以通过console.dir()把函数打印出来，看看这个原型。

function doSomething(){}
console.dir(doSomething)

打印结果

从上图打印结果中，我们可以看到，画红色方框内有一个prototype属性。这个就是每个函数中都会有的特殊的属性。
从上图可以看到，prototype也是一个对象，现在将这个对象展开，

prototype展开后的内容

我们可以看到prototype里面还有两个属性，一个是constructor(构造函数),还有一个是__proto__(这个也是原型),
当然我们也可以往原型里面加点东西。

   function doSomething(){}        
   doSomething.prototype.cook = "cooking";
   console.dir(doSomething)

往原型里添加cook属性

当然，也可以基于这个原型new 一个实例对象。

function doSomething(){}        
doSomething.prototype.cook = "cooking";
let doSomethingObj = new doSomething();
console.dir(doSomethingObj)

实例对象中的数据

从打印出来的实例对象中的数据可以看出，实例对象里也有一个原型__proto__,前面提到，这个实例对象是基于doSomething里的prototype构造出来的，换句简单的描述：这个实例对象是以doSomething的prototype原型为模板构造出来的一个实例对象.
这里可以大胆的假设:通过new doSomething 构造出来的doSomethingObj实例对象里的__proto__原型来自doSomething函数的特殊属性prototype.也可以说doSomethingObj里的__proto__指向doSomething里的prototype.
简言之:doSomething.prototype == doSomethingObj.__proto__
为了证实这个假设，我们可以往doSomethingObj.__proto__里添加属性eat打印出来，再将doSomething.prototype打印出来，对比看，如果doSomething.prototype中也存在eat属性，就说明这个假设是成立的。

        function doSomething(){}        
        doSomething.prototype.cook = "cooking";
        let doSomethingObj = new doSomething();
        doSomethingObj.prop = "some value";
        doSomethingObj.__proto__.eat = "eat"
        console.log(doSomethingObj)
        console.log(doSomething.prototype);

doSomethingObj和doSomething的比较

从上图的比较可以看出，给 doSomethingObj.proto添加属性eat,doSomething.prototype中也出现了eat.
因此，我们得出结论：doSomething.prototype == doSomethingObj.__proto__
同样，我们也可以往实例对象里添加属性，

    function doSomething(){}        
    doSomething.prototype.cook = "cooking";
    let doSomethingObj = new doSomething();
    doSomethingObj.prop = "some value";
    console.log(doSomethingObj)

往实例对象中添加属性

从上图中我们可以看到，doSomethingObj中多了一个值为"some value"的prop属性。

proto里的proto:

这里细心的朋友应该也注意到了doSomethingObj里__proto__也就是(doSomething的prototype)里还有一个__proto__,
我们不妨展开看看里面的内容：

__proto__里的__proto__的内容

这里需要知道一个概念：默认情况下, 所有函数的原型属性的 proto 就是 window.Object.prototype. 所以 doSomethingObj 的 proto 的 proto (也就是 doSomething.prototype 的 proto (也就是 Object.prototype))
这里可以看绿色框框圈住的constructor，它指向的是一个Object.(这里只将原型，后面再补充)

原型链：

由上文可以看出，一个实例对象里面的__proto__里有__proto__,__proto__里的__proto__里还有__proto__。这个就形成了一条原型链。
说了这么多，原型链有什么用呢？
当我们要访问一个实例对象里的属性时，我们只需要通过点操作就能够访问到，如：我们要访问doSomethingObj里的eat属性时，我们只需要通过doSomethingObj.eat就可以访问到了，但是浏览器在这中间都做了些什么呢？
其实浏览器首先会先去doSomethingObj里面找这个属性，如果找到了则返回，没有找到则会进入doSomethingObj里面的__proto__中查找，如果找到则返回，没有找到则继续往当前路径所在的__proto__里面找，以此类推，直到找不到__proto__为止(window.Object.prototype里没有__proto__)，如果还是没有找到该属性，则返回undefined.

可以通过打印验证：

        function doSomething() { }
        doSomething.prototype.cook = "cooking";
        let doSomethingObj = new doSomething();
        doSomethingObj.prop = "some value";
        doSomethingObj.__proto__.eat = "eat"
        console.log("doSomethingObj.prop:      " + doSomethingObj.prop);
        console.log("doSomethingObj.cook:       " + doSomethingObj.cook);
        console.log("doSomething.prop:           " + doSomething.prop);
        console.log("doSomething.cook:            " + doSomething.cook);
        console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);
        console.log("doSomething.prototype.cook:  " + doSomething.prototype.cook);

打印结果

注意:由上面的打印结果可以看出，访问实例属性会照着原型链的往下找，该构造函数访问属性不可以。

以上纯属个人总结，有不对的地方还望指正，谢谢。

javascript原型的理解

原型： 每个函数都有一个特殊的属性叫作原型（prototype）

__proto__里的__proto__:

原型链：

原型：每个函数都有一个特殊的属性叫作原型（prototype）

proto里的proto: