JavaScript高级之prototype原型

在深入学习JavaScript过程中，有一个概念是不能不提及的，这个概念就是“原型”-prototype，这个概念本身是非常重要的但是恰恰又是最不好理解的，这个概念的理解会对以后的学习产生很大的帮助，本篇文章就来初步去学习这个原型。

    返回对象类型原型的引用。

这句话猛的看一下貌似不太理解，那么聪明的你就在心里慢慢地默念10遍，如果还不理解，那么请接下来跟着我的思路一步一步的走，不用怕啰嗦，花半个小时把知识慢慢吃透，我相信对你会有收获的。

    class.prototype

tips:有的小伙伴可能会问我，这个"class"是什么东东呢？在这里，我先暂且把函数对象的名称叫做类。如果大家有Java知识的话，都知道Java中有类的概念，可是事实上JavaScript中是没有“类”的概念的，只有对象的概念，在这里为了说明清楚，我分别写一段JavaScript和Java代码，来对比一下。

        <script type="text/javascript">
            // 定义一个函数对象
            function Person(){

            }

            var p1 = new Person();
        </script>

        // 定义一个类
        class Person{

        }

        Person p1 = new Person();

聪明的你肯定一经对比就明白了，那么原型的格式就是：Person.prototype，这也就是我为什么把prototype的格式定义为：class.prototype的原因了。

好了，说了这么多，下面正式进入正题。

在说明prototype作用之前，先来看一个例子并思考问题。

        <script type="text/javascript">

            function Person(username){
                this.username= username;
            }

            var p1 = new Person('zhangsan');
            alert(p1.username);
        </script>

这个打印结果很简单，就是zhangsan 。如果程序写到这里，如果发现我们要创建的Person对象发现少定义了一个“age”属性，那么一般我们常用的做法是这样的，一种是直接改写Person函数对象，即function Person(username，age)，这样做的好处是确实方便了，但是会导致new Person('zhangsan')这种创建对象的代码又要重新修改，否则我们创建的对象age的值总是undefined;另一种做法是可以动态的为创建好的Person对象（本例子是p1所指向的对象）添加一个age属性，这样做确实也挺方便，但是又会发生另外一个问题，就是，如果我要再去创建一个p2对象的时候（var p2 = new Person()），实际上这个p2对象里面仍然是没有这个age属性的。那么现在能不能想一种办法，或者是现在就想实现这么一种功能，当我把这个功能实现了之后，Person函数对象下面的所有创建的实例都有这么一个age属性。答案是肯定的，那么实现的方式就是使用的是：原型。

现在我们来看下使用原型的方式如何去解决上面的例子问题。

        <script type="text/javascript">     
            function Person(username){
                this.username = username;
            }

            var p1 = new Person('zhangsan');
            alert(p1.username);

            Person.prototype.age = 30;  // 使用原型方式为函数对象添加age属性
            alert(p1.age);

            var p2 = new Person("lisi");
            alert(p2.age);                        // 打印结果是：30
        </script>

咦，真奇怪！为什么就添加了Person.prototype.age = 30此句代码就可以实现所有的Person的实例对象都拥有了age属性呢？好了，开始划重点，下面的这段话要好好琢磨：

当程序去加载Person函数对象的时候，JS引擎就会为Person构造器去创建Person的原型对象，它们之间是相互独立存在的，这个Person构造器里面就有一个prototype属性指向了此原型对象，同时原型对象里面有一个constructor属性指向了构造器，当Person的一个实例对象去使用一个不存在的属性时，会自动到Person构造器的原型对象中去找。

从图上就很直观了，Person构造器有一个prototype属性指向了Person原型对象，而Person原型对象有一个constructor属性指向Person构造器，当我们去实例化一个Person对象的时候，生成的对象内部也会有一个叫做prototype的属性指向了这个Person构造器所对应的原型对象。当我们写Person.prototype.age = 30这句代码的时候，实际上是将这个age属性添加到了这个Person构造器所指向的Person原型对象。那聪明的你现在应该有点茅塞顿开了吧，当我们去访问p1.age的属性的时候，其实这个p1的实例对象里面并没有age属性，只有username属性，那么为什么仍然可以访问呢？原因就在于当实例对象去使用一个不存在的属性时，会自动到Person构造器的原型对象中去找，那么这样的话，也就解决了当我们无论创建多少个实例对象，都会自动到Person构造器的原型对象里面去找属性了。
tips:插播一条额外话，看一个代码

        <script type="text/javascript">

                function Person(username){
                    this.username = username;
                }

                var p1 = new Person('zhangsan');

                alert(p1.constructor);
        </script>

现在再来分析这个程序，我们知道，constructor的作用是：返回对象的构造器。那么仔细分析一下为什么是这样的？我们的p1对象里面明明压根都没有constructor属性呀，为什么没有打印undefined，反而是打印了Person构造器呢？原因是这样的：还是如上面所说，当我们的一个实例对象去访问一个不存在的属性的时候，那么这个时候就会自动去Person构造器的原型对象里面去找，通过上面图可以看出来，Person原型对象里面有一个constructor属性又指向了Person构造器。哦哦，天哪，原来是这样，这个时候就应该很清晰了吧。

聪明的你，冥冥之中是不是又发现了一个很问题呢？前面说到：通过原型的方式添加属性的时候，所有的实例对象都是可以访问到这个属性的？就以上面的例子为例，我们说，p1、p2对象的age属性本身是没有的，但是是可以访问的，原因就在于访问不存在的属性的时候，实际上是可以自动去找Person构造器所对应的Person原型对象，那么现在的问题是：当p1对象把age属性的值修改之后，会影响到p2对象的age的值吗？来，看代码

        <script type="text/javascript">
            function Person(name){
                this.name = name;
            }

            Person.prototype.age = 30;

            var p1 = new Person('zhangsan');
            alert(p1.age);                   // 30

            var p2 = new Person("lisi");
            alert(p2.age);                // 30

            p1.age = 90;

            alert(p1.age);            // 90
            alert(p2.age);            // 30
        </script>

天哪，神奇呢，怎么会这样呢？p1对象和p2对象中去访问age属性，实际上都是访问的是Person构造器所指向的Person原型对象，那么既然p1对象把age的值修改为90，那么理论上说p2对象再去访问age属性，值应该也是90才对嘛，你可能会说，他们指的是同一份age属性嘛。哈哈，解释的貌似是合情合理，可是结果又不是自己的预期，其实这样解释应该更好理解一点，就是：p1.age = 90，相当于是为p1对象动态的添加了一个age属性，这个仅仅是p1对象动态添加的，并没有去真正的去访问修改Person原型对象中的age属性的值，而p2对象仍然是没有age属性的，所以p2.age = 30，仍然是相当于是从Person原型对象里面获取的值，所以是30，而p1对象自动添加了一个age属性，其值是90，所以p1.age的值当然是90喽。

好，今天就解释到这里喽，本文原创，如需转载，别忘记注明出处哦，谢谢哒！

下一篇：所有类的父类都是Object类,为什么?涉及到了原型的继承哦。