JavaScript原型与原型链

本文是前端学习笔记第五篇，对应的是web前端开发JavaScript精英课js第19~20课时

好久没有更新了，这几天的烦心事多的真是一言难尽。。吐槽归吐槽，学习还是不能停的

原型链给我的感觉就是类似于Java中的继承，但是多了很多复杂的东西，到现在还是有点不适应JS的继承模式，本文进行的总结可能有一定错误，若有发现大神们还请指点一下

 

目录

查看一个对象的原型对象

修改原型对象属性和更换原型对象的区别

对象能否修改原型对象的值

原型链

---

JavaScript中的原型

    JS中，每个对象都有一个__proto__属性（隐式原型），每个函数都有一个prototype属性（显式原型），隐式原型__proto__指向创建这个对象的构造函数的显式原型（即prototype），而构造函数的prototype是系统默认给的一个对象，这个对象的__proto__属性指向最终原型Object.prototype。类似于面向对象编程语言中的继承，JS中的对象也继承了其原型的属性，很多地方都没有提到原型和原型对象的区别，我这里说一下自己的想法，原型对象是相对对象而言的，原型是相对函数而言的

比如一个构造函数Person.prototype绑定了一个对象作为这个构造函数造出来的对象的原型对象，那么那个被绑定的原型对象的构造函数就是构造函数Person的原型，而原型对象便是Person.prototype指向的对象或用构造函数Person造出来的对象的__proto__属性指向的对象

 

查看一个对象的原型对象

   前面我们知道，每个对象都有一个系统赋予的隐式属性__proto__，这个属性指向的就是其构造函数的prototype属性，而构造函数的prototype属性指向的是原型对象，即可以间接的理解为__proto__指向的便是其原型对象，每个对象一旦被创建出来就会有原型对象(有一种例外情况，下面会讲)，先来看看一个最简单的对象的原型对象是怎么样的

<script>
        function Student() {
            
        }

        var stu = new Student();

</script>

可以看到，构造函数造的对象的__proto__属性指向的原型对象中有一个构造器constructor，以及一个__proto__属性，这个原型对象中的__proto__属性指向的是最终原型Object.prototype，注意我一直都在强调是构造函数造的对象才是这样，而我们知道，创建对象的方式除了用构造函数创造，还可以通过var obj = new Object()的方式以及对象字面量 : var obj = {} 的方式创建，而通过后面两种方式创建的对象，则会有一点不同

看下面的代码

<script>
        var stu1 = new Object();

        var stu2 = {};

</script>

可以看到，用这两种方式创建的对象的__proto__属性指向的直接便是最终原型Object.prototype，因为这两种方式本质上都是一样的，都是通过调用Object构造函数来创建的，而通过这种方式创建的对象的__proto__属性指向的属性直接便是Objec.prototype，所以便是这样的结果

 

修改原型对象属性和更换原型对象的区别

      我们知道，JS中的原型对象相当于Java中父类一般的存在，对象可以继承其原型对象的属性，那么对原型对象的操作是否会影响到对象呢，在java中我们都知道，一旦对象被创建出来，你怎么改父类的成员变量，子类的成员变量的值都是不会变的，那么在JS中会怎样呢?

先来看直接修改原型对象属性，是否会对对象继承过来的属性的值产生影响

<script>
        Student.prototype.num = "123";

        function Student() {
            
        }

        var stu = new Student();

        Student.prototype.num = "456";

        console.log(stu.num);  // 456

</script>

可以看到，JS中还是有区别的，若通过原型对象的函数的引用去修改其属性值，那么即使在此之前对象已被创建，还是会影响到那个对象的属性值

 

再看看更换原型对象会怎么样

<script>

        Student.prototype.num = "123";

        function Student() {
            
        }

        var stu = new Student();

        Student.prototype = {
            num : 456
        }

        console.log(stu.num);  // 123

        var stu2 = new Student();

        console.log(stu2.num); // 456
</script>

可以看到，两种修改原型对象的区别在于若通过原型对象的引用找到属性值进行修改是会影响到已创建的，而通过更换原型对象的方式修改原型对象只会对修改之后创建的对象的属性产生影响

 

对象能否修改原型对象的值

    经常能看到有人说对象只能通过自己的引用修改自己的属性值，不能通过自己的引用修改其自原型对象继承过来的属性值，其实是不太准确的，看下面一个例子

 <script>
        
        function Father() {
            this.property = {
                house : "白宫",
            }
        }

        function Son() {

        }

        var father = new Father();

        Son.prototype = father;

        var son = new Son();

        son.property = "华盛顿";

        console.log(father.property);  // obj(也就是没变)

        son.property.house = "华盛顿";

        console.log(father.property.house); // 华盛顿

    </script>

 通过上面的例子可以清晰的看到，对象虽然无法修改原型对象的属性，但若原型对象的属性是对象类型，那么便可以通过该对象的引用修改其属性

 

原型链

一个对象有自己的原型对象， 而一个原型对象也可以有自己的原型对象，这样便形成了一条原型链，这其实也就是上面提到的隐式属性__proto__的作用：构成原型链，实现基于原型的继承。举个例子，当我们访问obj这个对象中的x属性时，如果在obj中找不到，那么就会沿着__proto__依次查找。而显式原型构造函数.prototype的作用则是用来实现基于原型的继承与属性的共享。先来看下面一个例子，感受一下一条原型链是怎么形成的

<script>

        function Grand() {
            this.name = "爷爷";
        }

        var grand = new Grand();
        Father.prototype = grand;

        function Father() {
            this.name = "爸爸";
        }

        var father = new Father();
        Son.prototype = father;

        function Son() {
            this.name = "儿子";
        }

        var son = new Son();
        SuperSon.prototype = son;

        function SuperSon() {
            this.name = "孙子";
        }

        var superson = new SuperSon();


</script>

通过显式原型实现了继承的关系，而每当一个对象查找某个属性时，若在自己身上找不到，就会通过__proto__属性找到自己的原型对象，看原型对象身上是否有这个属性，若再没有，则继续通过__proto__属性找到再上一个原型，就像沿着链依次向上查找一样

这里引申出一个困扰过我的问题，为什么father以下的对象的属性的proto在浏览器中都是显示__proto__ : Grand，看下图

我们知道那里的__proto__肯定不是 == Grand的，那这里为什么会显示Grand呢，其实我举这个例子的时候已经说明很多问题了，这里的Grand只是表示这个__proto__属性的最终来源，而从Father.prototype开始，Father.prototype表示的是grand，而grand的构造函数的prototype属性未经修改过，就和普通的构造函数一样，而用普通的构造函数创建的对象的__proto__的来源为Object，因此便会发生这种情况（解释可能有误，仅个人理解）

 

最后，再提一提上面说到的是否每个对象都有自己的原型对象，答案是否定的,通过Object.create()函数我们可以创建一个以某个对象为原型对象的对象，而通过Object.creat(null)创建出来的对象是没有原型对象的，甚至没有任何属性