JS 原型链

时间 2019-12-17

原文原文链接

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

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

　　　　js是面向对象的语言，既然是面型对象，就必定会有一个对象的模板，Java中用"类"来做为对象的模板，而JS中，能够用构造函数来做为对象的模板，你能够认为至关于Java中的"类"，java

　　写法以下所示：函数

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

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

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

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

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

　　　　咱们能够根据构造函数来建立N个对象，每一个对象有本身的内存空间。咱们来思考这么一个问题：若是构造函数中有两个固定值的属性，当咱们用这个构造函数去建立对象的时候，每一个对象都会在本身的内存空间中存放这个固定值的属性，这就形成了没必要要的浪费，对吧？想想JAVA是否是也存在这种状况？是存在的，那JAVA怎么解决的？对,继承！htm

　　　　在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。

JS 原型链

参考资料