Javascript原型链和原型继承

   <p>哇好久都没有写随笔啦,整个人都慵懒啦。</p>    <p>为了不让大家忘记我，把以前写过的一些慢慢发出来。</p>    <p>在JS 中, 有两条链子,作用域链 和 原型链.</p>    <p>作用域链相对容易理解,两点</p>    <ul>     <li>函数限定变量作用域,就是说，在JavaScript中，在函数里面定义的变量，可以在函数里面被访问，但是在函数外无法访问</li>     <li>在JavaScript中使用变量，JavaScript解释器首先在当前作用域中搜索是否有该变量的定义，如果有，就是用这个变量；如果没有就到父域中寻找该变量. 由于变量提升,因此在实际开发的时候，推荐将变量都写在开始的地方，也就是在函数的开头将变量就定义好.</li>    </ul>    <p>好了,开始看看原型链吧 .</p>    <h2>原型链</h2>    <p>在我之前的一些随笔, JavaScript使用构造函数获取变量的类型名 涉及了一些关于 Javascript 原型的东西,这里关于原型就不啰嗦了 .</p>    <p>在 Javascript 中, 每一个对象 o 都具有 __proto__ 属性(这个属性在IE9 以下没有暴露出来),被称为原型 ,根据 属性搜索原则 对象 o 可以通过 . 或者 [] 读取原型的属性,但是当写入时,不会在原型上修改属性,而是直接在对象 o 上添加.</p>    <p>当然,原型也是对象,原型也有 __proto__ 属性, 子子孙孙无穷尽也 ~~~</p>    <p>真的是无穷尽吗,当然不是 !</p>    <pre>  <code class="language-javascript">var obj = {a: 'pawn'};</code></pre>    <p>上面通过对象字面值的方式申明了一个对象 obj ,并且拥有属性 a .</p>    <p><img src="https://simg.open-open.com/show/2f10c03033bd340cb33d42c99ba9beb0.png"></p>    <p>由于 o.__proto__ === Object.prototype ,那么可以认为这种方式等价于</p>    <pre>  <code class="language-javascript">var obj = new Object({a: 10});</code></pre>    <p>所以,o 是继承自 Object.prototype ,但 Object.prototype 也是对象,它继承自什么呢?</p>    <p><img src="https://simg.open-open.com/show/065d60e7812579a7da8b2742495b46d4.png"></p>    <p>好吧,它继承自 null , 万剑归宗。</p>    <p>好了,现在找到了原型链的第一条子链</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/71775bf6fdf71c0407bc401c1ca58258.png"></p>    <p>我们在来看 function</p>    <pre>  <code class="language-javascript">var func = function() {}</code></pre>    <p>通过字面值声明一个 function</p>    <p>同理</p>    <p><img src="https://simg.open-open.com/show/c7043463ac5da953f381255e504d4758.png"></p>    <p>func 继承自 Function.prototype ,那 Function.prototype 也是对象,它继承自什么呢?</p>    <p><img src="https://simg.open-open.com/show/567a51dd7e633754212b2450d21b8ac2.png"></p>    <p>可以看到, Function.prototype 继承自 Object.prototype ,这也就回到了上一条链子.</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e1be57d1474a7fb847ac93635f038716.png"></p>    <p>好了,那现在引入一个问题, Function 本身也是函数,那 Function 继承自哪呢? 当然是 Function.prototype ,所以JS中最乱伦的东西出现了, Function 是自己的老子,即</p>    <p><img src="https://simg.open-open.com/show/f8e820fc349745352ec9ee542d3ca3ec.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1b049c6214050f5364e11a3c83a1f908.png"></p>    <p>那 Object 也是函数, Object 也当然继承自 Function.prototype .</p>    <p><img src="https://simg.open-open.com/show/493f38ce4f670f39cfc6b7d81faca7b5.png"></p>    <p>好了,这就是所有原型链的东西</p>    <p>看起来好像很乱,盗 JK老师 一张图, 详细说明这个问题</p>    <p><img src="https://simg.open-open.com/show/b054a9c2aedd0786df5e7f05aa90d92b.gif"></p>    <p>现在做一个总结</p>    <ul>     <li>所有的函数都继承自 Function.prototype , Function , Object 是函数,所以继承自 Function.prototype</li>     <li>所有的对象都直接或间接继承自 Object.prototype , Function.prototype.__proto__ === Object.prototype 函数也是对象,所以函数最终继承自 Object.prototype .</li>     <li>Object.prototype 继承自 null,万剑归宗</li>    </ul>    <h2>原型继承</h2>    <p>看完了原型链,再看原型继承就简单了</p>    <pre>  <code class="language-javascript">var ProtoHerite = function(source) {    var o = {};    if(o.__proto__){      o.__proto__ = source;      return o;    }      var F = function() {};    F.prototype = source;    return new F();  }</code></pre>    <p>这个函数返回的对象原型继承自 source ,这也是 Object.create(source) 实现思路.</p>    <p>如果觉得图画的还可以,其实我原来是学美术的 .</p>    <p>如果有错,望不吝赐教</p>    <p> </p>    <p>来自：http://www.cnblogs.com/likeFlyingFish/p/6505324.html</p>    <p> </p>