JavaScript原型链深入理解
RosellaQfn
7年前
<p>在JS中，原型链是一个重要的概念，不管是继承还是属性值的查找中，都用到了原型链的基本知识，有些朋友经常问我一些关于原型链的问题，今天整理一下自己对原型链的理解，下次我就不用在去解释了，直接看文章。</p> <p>首先，大家都知道在JS中有六种 <strong>基本数据</strong> 类型和一种 <strong>复杂类型</strong> 。</p> <p>六种基本数据类型：</p> <ol> <li>String</li> <li>Number</li> <li>Boolean</li> <li>null</li> <li>undefined</li> <li>Symbol（ES2015新加入，解决属性名的冲突问题。</li> </ol> <p>另外一种复杂类型自然而然就是 <strong>Object</strong> ，有的人也说JS中 <strong>一切皆是对象</strong> 。上面的六种基本数据类型中，除了null和undefined没有构造函数外，其他4种都对应有其构造函数对象，有时利用这些构造函数可以强制转换数据类型。</p> <p>要想讲清楚原型链的一些问题，还有一个特殊的Object对象必须事先说清楚，那就是 <strong>Function</strong> 对象。它也是对象，只不过比其他普通对象复杂点罢了。</p> <h2><strong>组合继承</strong></h2> <p>首先我们先写一个大家熟悉的组合继承(原型链+构造函数)，然后根据这个组合继承去了解原型链到底是怎样连接起来的。</p> <pre> <code class="language-javascript">//父类 function Person(name,age){ if(this instanceof Person){ this.name = name; this.age = age; }else { Person.call(this,name,age); } } Person.prototype.say = function(){ console.log('我叫' + this.name +'，今年' + this.age + '岁了！') } //子类 function Student(name,age,gride){ if(this instanceof Student){ Person.call(this,name,age); this.gride = gride; }else { Student.call(this,name,age,gride); } } Student.prototype = new Person(); Student.prototype.constructor = Student; Student.prototype.say = function(){ console.log('我叫' + this.name +'，今年' + this.age + '岁了，考试考了' + this.gride + '分！'); } var stu = new Student('chping',23,100); stu.say();</code></pre> <p>此时会输出 <strong>我叫chping，今年23岁了，考试考了100分！</strong> ，这说明我们的组合继承就实现了，下面可以根据这个例子逐句解释一下原型链的相关问题，顺便讲解这个组合继承了。</p> <h2><strong>第一个问题：安全使用构造函数</strong></h2> <p>首先可能你对 <strong>Person</strong> 和 <strong>Student</strong> 里面的那个判断有些疑问，你可能是下面这样写构造函数：</p> <pre> <code class="language-javascript">function Person(name,age){ this.name = name; this.age = age; }</code></pre> <p>不这样写，主要是 <strong>防止构造函数被执行</strong> ，因为一旦构造函数执行，其内的属性值会被挂载到window上面去了（当构造函数执行的时候，里面的 <strong>this</strong> 是指向window的）。</p> <p>好的，这个问题解决了，在看第二个问题。</p> <h2><strong>第二个问题：prototype对象</strong></h2> <p>接着我们来体会一下下面这句话：</p> <p>每一个函数对象都有一个prototype属性，该属性指向其prototype对象。</p> <p>这句话相信你已经听了很多遍了，可能并不是这样说的，但是就是这么个意思。那么这句话应该怎么理解呢？</p> <p>其实也不难，先看前半部分 <strong>每一个函数对象都有一个prototype属性</strong> 。这半句就是说 <strong>函数对象</strong> 默认有一个属性，这个属性叫 <strong>prototype</strong> 。另外，函数对象就是指用 <strong>function</strong> 声明的对象（补充一下：在ES2015之前，有两种声明变量的方式， <strong>function</strong> 用来声明函数变量， <strong>var</strong> 用来声明普通变量。但是在ES2015中新加了 <strong>let</strong> 和 <strong>const</strong> ）。</p> <p>再看一下后半部分 <strong>该属性指向其prototype对象</strong> 。后半句的意思就是说 <strong>prototype</strong> 属性指向的是一个也叫 <strong>prototype</strong> 的对象，该对象是随着函数对象而产生的。也就是说，只要通过 <strong>function</strong> 定义一个函数对象，就会生成一个 <strong>prototype对象</strong> ，并在函数上生成一个 <strong>prototype属性</strong> 来指向该 <strong>prototype属性</strong> 。用图来表示一下就是下面的样子：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c322147309e49acdb03c3684438a99d0.jpg"></p> <p>构造函数与其prototype对象</p> <p>从图中（此图很丑，欢迎投稿：））你可以看到还有一个知识点，就是 <strong>prototype对象</strong> 中还有一个 <strong>constructor</strong> 对象，该对象又指向了构造函数，这也是一个需要注意的知识点，后面我们在展开来说，这里先记一下。</p> <p>通过上面的这句话，我们可以联想到，Object好像也是一个构造函数，Function好像也是一个函数，他们是不是也是这样的呢？回答是肯定的，他们也是这样的。如下图：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/706f44132ca7d26c3a5e7674a57b6ede.jpg"></p> <p>Object的构造函数与其prototype对象</p> <p>;</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/bd03fe3f42d78109ccc6627a0c836dda.jpg"></p> <p>Function的构造函数与其prototype对象</p> <h2><strong>第三个问题：__proto__ 属性</strong></h2> <p>先说明一下， __proto__ 的写法是前后各两个英文输入法下的下划线，不是一个。</p> <p>然后我们再来看这样一句话：</p> <p>每一个对象都有一个__protto__属性，该属性指向创建这个对象的构造函数的prototype对象。</p> <p>这句话稍微有点绕，我再来解释一下这句话。这句话的前半部分比较好理解，就是说JS中的每一个对象都有一个属性，这个属性的名字叫做 __proto__ ，还要再说的话，就是注意 <strong>JS中一切皆是对象</strong> 这句话。</p> <p>这句话后半部分有点绕，我们把它分成两句话去理解：</p> <ol> <li><strong>创建这个对象的构造函数</strong></li> <li><strong>的prototype对象</strong></li> </ol> <p>这样就明白了，但是创建这个对象的构造函数怎么确定呢？这是个问题，不好解释，我也解释不好。就总结一下:</p> <ol> <li>function定义的函数对象的 __proto__ 属性指向Function对象的prototype对象 。</li> <li>非function定义的对象的 __proto__ 属性指向创建它的构造函数的prototype对象 。（就是都指向Object的prototype对象）</li> <li><strong>Object的prototype对象的 __proto__ 指向null </strong> 。</li> </ol> <p>还是看图吧：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/74172f54159a4afed6c7e84f213d053c.png"></p> <p>对象的 <strong>proto</strong> 属性</p> <p>相信通过图你已经看懂了 __proto__ 属性的指向问题了。</p> <h2><strong>思考组合继承</strong></h2> <pre> <code class="language-javascript">//父类 function Person(name,age){ if(this instanceof Person){ this.name = name; this.age = age; }else { Person.call(this,name,age); } } //上面通过function声明了一个函数对象，那么该对象的肯定有一个prototype属性， //并且指向其prototype对象。我们可以打印验证一下 console.log(Person.prototype); /*打印结果如下 { constructor: function Person(name,age) arguments:null caller:null length:2 name:"Person" prototype:Object __proto__:function() , __proto__: Object } */</code></pre> <p>这说明 <strong>prototype对象</strong> 就是一个空对象添加了一个 <strong>constructor属性</strong> 。</p> <p>另外，也看到了 <strong>prototype</strong> 对象有一个 __proto__ 属性，指向Object，先记住。</p> <p>此外，我们也看到了 <strong>constructor</strong> 指向的Person函数确实存在prototype属性和 __proto__ 属性，以及其指向问题，我们同时也可以打印验证一下：</p> <pre> <code class="language-javascript">console.log(Person.prototype.constructor === Person);//true console.log(Person.prototype.__proto__=== Object.prototype);//true console.log(Person.__proto__=== Function.prototype);//true</code></pre> <p>我们再来验证一下 <strong>Object</strong> 和 <strong>Function</strong> 的prototype属性，constructor属性还有 __proto__ 属性</p> <pre> <code class="language-javascript">console.log(Object.prototype); console.log(Object.prototype.constructor === Object);//true console.log(Object.prototype.__proto__ === null);//true console.log(Object.__proto__ === Function.prototype);//true console.log(Function.prototype); console.log(Function.prototype.constructor === Function);//true console.log(Function.prototype.__proto__ === Object.prototype);//true console.log(Function.__proto__ === Function.prototype);//true</code></pre> <p>OK，相信大家对原型链有了一定了解了。我们接着往下看。</p> <pre> <code class="language-javascript">Person.prototype.say = function(){ console.log('我叫' + this.name +'，今年' + this.age + '岁了！') } `</code></pre> <p>在Person的 <strong>prototype对象</strong> 上添加了一个say方法，和给普通对象添加方法并没有区别，只不过在稍后使用的时候才会展现出它的与众不同。</p> <p>接下来是Student类:</p> <pre> <code class="language-javascript">function Student(name,age,gride){ if(this instanceof Student){ Person.call(this,name,age); this.gride = gride; }else { Student.call(this,name,age,gride); } }</code></pre> <p>在此时，Student和Person以 Person.call(this,name,age); 这一句代码产生了联系，此时Student仅仅是通过构造函数继承的方式调用了Person，这并不是本文重点，我们此时可以认为原型链上Student和Person并没有任何联系，让它们在原型链上产生联系的是下面这条语句。</p> <pre> <code class="language-javascript">Student.prototype = new Person(); Student.prototype.constructor = Student;</code></pre> <p>我们来想想这两条语句都干了啥？</p> <p>首先我们知道，Student函数对象在被 <strong>function</strong> 声明的时候已经生成了其 <strong>prototype</strong> 对象，并且通过 <strong>prototype属性</strong> 建立了联系。</p> <p>这里的第一条语句居然是， 改变了Student函数对象的prototype属性指向，不再指向function声明时自动生成的prototype对象，而是指向Person函数对象的一个实例对象。 让我们用图展示一下，就成了下面这样：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/10818755da1deb73614c28827bb0374a.png"></p> <p>原型链继承关键步骤图解</p> <p>OK，原型链继承就这样实现了。但是由于我们让 <strong>Student</strong> 函数对象的 <strong>prototype</strong> 属性重新指向了一个 <strong>Person</strong> 函数对象的实例，而这个实例对象里面是不可能有 <strong>constructor</strong> 属性的，自然也不会指向 <strong>Student</strong> （为什么没有呢？前面已经说了，因为只有用 <strong>function</strong> 声明函数对象的时候，自动生成的 <strong>prototype对象</strong> 中才默认有 <strong>constructor属性</strong> ，其他对象不会有）。</p> <p>接下来就是在Student函数对象新指向的prototype对象上添加say方法：</p> <pre> <code class="language-javascript">Student.prototype.say = function(){ console.log('我叫' + this.name +'，今年' + this.age + '岁了，考试考了' + this.gride + '分！'); }</code></pre> <p>这个就没有说的必要了，就是在对象上加了一个方法，只不过这个对象有些特别罢了。然后就是通过Student构造函数来生成实例：</p> <pre> <code class="language-javascript">var stu = new Student('chping',23,100); stu.say();</code></pre> <p>此时，我们还是要看看这两句干了啥？</p> <p>先看第一句， new Student('chping',23,100); ，其中我们必须先得知道关键字 <strong>new</strong> 做了什么：</p> <pre> <code class="language-javascript">var obj = {} Student.call(this,'chping',23,100); obj.__proto__ = Student.prototype; return obj;</code></pre> <p>这样相信你就明白，第一句干的活了:</p> <ol> <li>首先创建一个空对象。</li> <li>将属性挂载到该空对象上。</li> <li>将空对象的 __proto__ 属性连接到Student函数对象的prototype对象上，来生成原型链。</li> <li>返回该对象给stu变量。</li> </ol> <p>接下来就是第二句 stu.say() ，这句话的意思就是 <strong>stu实例</strong> 对象调用 <strong>say方法</strong> ，但是在查找的时候发现， <strong>stu实例</strong> 对象上并没有这个方法，于是 <strong>原型链</strong> 就来了。此时他会根据其 __proto__ 属性来查找 <strong>Student</strong> 函数对象的 <strong>prototype对象</strong> 上有没有 <strong>say方法</strong> ，然后它发现正好有一个 <strong>say方法</strong> ，于是就可以执行该方法了。</p> <p>此时又产生一个问题，在执行Student函数对象的prototype上的say方法时，里面的 <strong>this</strong> 指向谁呢？</p> <p>可以想一下，此时 <strong>say</strong> 方法是被谁调用的，很明显是 <strong>stu</strong> 实例对象，所以 <strong>this</strong> 指向 <strong>stu</strong> ，所以， this.name 、 this.age 、 this.gride 就是实例对象 <strong>stu</strong> 上面的 chping 、 23 、 100 了。</p> <p>下面我们再来看一下完整的原型链继承的图解，如果你能完全看懂这张图，那么你对原型链的理解也就差不多了。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/06935da97dc06cba5b0bf8550d9b82d6.jpg"></p> <p>原型链继承图解</p> <h2><strong>结语</strong></h2> <p>原型链的基础知识差不多通过上面这个例子就介绍完了，我们来总结一下：</p> <ol> <li>每一个函数对象都有一个prototype属性，该属性指向其prototype对象 。</li> <li>每一个对象都有一个 __protto__ 属性，该属性指向创建这个对象的构造函数的prototype对象 。 <ol> <li>function定义的函数对象的 <strong>proto</strong> 属性指向Function对象的prototype对象 。</li> <li>非function定义的对象的 <strong>proto</strong> 属性指向创建它的构造函数的prototype对 。（就是都指向Object的prototype对象）</li> <li><strong>Object的prototype对象的 <strong>proto</strong> 指向null </strong> 。</li> </ol> </li> </ol> <p>然后在看看下面几个常见的原型链的小题目，相信你对原型链会有一个新的认识了。</p> <h2><strong>第一题</strong></h2> <pre> <code class="language-javascript">function Person(){ this.name = 1; } var person1 = new Person(); Person.prototype.name =2; console.log(person1.name); console.log(person1.__proto__.name); Person.prototype = { name:3 } console.log(person1.name); console.log(person1.__proto__.constructor); console.log(person1.__proto__.name); var person2 = new Person(); console.log(person2.__proto__.name); console.log(person2.__proto__.constructor == Object); console.log(person2.name);</code></pre> <p>上面的 console.log 会打印什么？</p> <p>这个题考察的是对prototype对象的理解。</p> <h2><strong>第二题</strong></h2> <pre> <code class="language-javascript">function Outer() { this.a = 1; } function Inner() {} var outer = new Outer(); Inner.prototype = outer; var inner = new Inner(); inner.a = inner.a + 1; console.log(inner); console.log(outer);</code></pre> <p>猜猜上面会是什么结果？</p> <p>这个题考察的是对实例对象上属性的理解。</p> <h2><strong>第三题</strong></h2> <pre> <code class="language-javascript">var animal = function(){} var dog =function(){} animal.price = 2000; dog.prototype = animal; var dd = new dog(); console.log(dog.price); console.log(dd.price);</code></pre> <p>在分析一下这个题目的输出结果？</p> <p>这个题目考察的是 __proto__ 属性的理解。</p> <h2><strong>第四题</strong></h2> <p>下面放大招了，这个题目可能不完全是原型链的问题，对JS基础知识的一个综合考察，可以试一试：</p> <pre> <code class="language-javascript">var a = new Object(); a.param = 123; function foo(){ get = function(){ console.log(1); }; return this; } foo.get = function(){ console.log(2); }; foo.prototype.get = function(){ console.log(3); }; var get = function(){ console.log(4); }; function get(){ console.log(5); } foo.get(); get(); foo().get(); get(); new foo.get(); new foo().get(); new new foo().get();</code></pre> <p> </p> <p>来自：http://www.jianshu.com/p/b745c5481fab</p> <p> </p>