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>
本文由用户 l371559739 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!