JS 原型链

　　之前对JS的prototype知识比较模糊，今天理清了记下来，以防忘记，直切正题：

　　

　　1.要明白原型链，就必须先清楚JS的构造函数模式：

　　　　js是面向对象的语言，既然是面型对象，就一定会有一个对象的模板，Java中用"类"来作为对象的模板，而JS中，可以用构造函数来作为对象的模板，你可以认为相当于Java中的"类"，

　　写法如下所示：

　　function Cat(name,color){
       this.name=name;
       this.color=color;
   }
　　var c = new Cat();

 

　　Cat函数就是构造函数，构造函数中的this指向的就是当脚本运行时Cat所生成的实例，如果把构造函数看成类，就会轻松许多。

　　紧接着下面一句var c = new Cat();就是根据构造函数生成相应的对象，类似于JAVA中根据类生成实例对象一样。

　　这就是JS中面向对象的构造器模式。

 

　　2.明白了构造函数模式，来看看构造函数模式的弊端以及如何解决：

　　　　我们可以根据构造函数来创建N个对象，每个对象有自己的内存空间。我们来思考这么一个问题：如果构造函数中有两个固定值的属性，当我们用这个构造函数去创建对象的时候，每个对象都会在自己的内存空间中存放这个固定值的属性，这就造成了不必要的浪费，对吧？想一想JAVA是不是也存在这种情况？是存在的，那JAVA怎么解决的？对,继承！

　　　　在JAVA中我们会将一些对象存在共性的地方，抽取出来存放到Super类中；在JS中对于每一个构造函数都有这么一个额外的对象，用来存放一些共有的东西，是不是很父类很像？这个额外的对象就是原型对象，一个原型对象对应一个构造函数，也就是说一个构造函数只有一个原型对象，例如构造函数Object，就对应一个原型对象，构造函数Obejct的prototype属性指向他所对应的原型对象，而Object构造器生成的实例对象都有一个__proto__属性，也只想Obejct构造器所对应得原型对象，这样就实现了节省内存的目的。如下代码:

　　function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}
　　Cat.prototype.type = "猫科动物";
　　Cat.prototype.eat = function(){alert("吃老鼠")};

　　3.明白了原型的概念，再来看看原型链的概念：

　　　　要清楚在构造函数模式中有几个角色：构造函数、实例对象、原型对象。 在这三个对象之间，他们的关系是怎样的？先来理一理。

　　　　

　　　　如上图所示，A代表构造函数，它持有一个prototype属性，指向他所对应的原型对象A.prototype，而A.prototype持有constructor属性指向A构造函数，以此来形成一对一的关系，而new A()代表着根据A构造函数来生成的实例对象，new A()持有一个__proto__属性，指向A所对应的原型对象，以此来实现多个实例对象共享原型对象中的固定状态的某些变量。

　　　　所以总结一下：构造函数中有一个prototype属性、原型对象有一个constructor属性、实例对象中有一个__proto__属性。

　　　　刚才好像落下一个，就是原型对象中除了constructor属性外，其实还有一个__proto__属性，这个怎么理解？如果你把原型对象看成一个实例对象，是不是他也可以从其他的原型对象中共享数据？这就是了，原型对象中的__proto__就是构成原型链的关键，你可以理解成继承链。

　　　　我们都知道JS是面向对象，那就不可避免的JS存在一个上帝级别的对象，就是Obejct，所有的一切对象来源于它，什么意思呢？

　　　　其实上面的A构造器所对应的原型对象中的__proto__指向就是Object的原型对象，所以可以向相面的图这样理解：

　　　　

　　  　补充一点：其实构造函数其实也是一个对象对吧？那么它是那个构造函数构造出来的呢？当然是Function，所以说构造函数作为一个函数实例对象，也持有__proto__属性，并指向Function.prototype。

参考资料

 

posted @ 2016-10-10 10:41  洞拐洞拐  阅读(237)  评论(0)  编辑  收藏  举报