JS 原型链学习总结

废话篇：

　　在js的学习过程中有一大难点就是原型链。学习的时候一直对这一内容不是十分的明白。纠结的我简直难受。，幸好总算给他弄通了，哇咔咔，总算可以不用在睡梦中还想着他了。

 

正文篇：

　　要了解原型链我们首先要记住的一点是JS中所有的东西都可以用对象来理解。函数在JS中实际上也是一个对象。然后再去看原型链的东西。

　　上图是首要的：

　　

　　实际上我们可以吧JS中的对象看成两种，一种是我们所熟知的一般的对象，还有一种就是JS中所有的方法对象。

 

一般对象:

　　对于一般的对象而言，其实际上就是一个方法与属性的集合，而在js中由于除去基础定义的常量数据类型（例如字符串啊，整形啊，等等。我们在存储的时候实际上他只是一个不变量，不可改变，虽然可以调用方法，但是实际上是每一次调用的时候js会自动解析成为一个新的对象的缘故。）以外，其他的都是对象，所以在js中我们可以理解一般对象实际上就是常量属性和对象属性所集合而成的内容。

　　我们要创建一个一般对象首先要做的是为其编写一个构造方法。构造方法实际上是function关键字定义的有参数名称或者是有变量可以指代的一个函数对象。例如：

 1 var test = function(){
 2     var me =this;
 3     
 4     me.name = "Arvin";
 5 
 6     me.showNaem = function(){
 7         alert(me.name);  
 8     }
 9 }
10 
11 var t = new test();
12 
13 //t变量就是一个对象，而他的构造函数就是test只带的方法。

例如以上代码，test在解析的时候就作为了一函数对象存储起来，当我们使用new方法的时候，系统会调用这一函数，并初始化一块区域出来，用于存储当前一般对象中的一些特殊的数据和方法（就比如直接用当前的对象的this指针为当前的对象直接添加的一些对象或是常量属性，例如上面示例中定义的name对象和showName方法）。然后系统会给当前的对象设置一个_proto_属性，其指代的数据和构造函数对象的prototype属性所指代的内容是一样的，而不是副本，即所有的继承与同一对象的对象其_proto_属性指向的区域是同一块的，这一区域是共享的。由此我们可知，实际上new关键字的操作就是，为当前的新的对象开辟一块内存区域，然后把其特有的属性存储到这块区域中，最后设置一个指向公有区域即原型对象区域的_proto_属性以此来应用其中的方法。JS就是通过这样的方式来实现继承的。

当然在定义一般对象的时候，我们还有别的方式，例如直接写对象直接量的形式。其实吧，这样定义出来的对象是直接继承于Object对象的。所以并不是当杜生成一个独立的对象的，因为，上面豆花的很清楚啦，所有的对象都是继承于Object对象的啊。

　　

函数对象：

　　而函数对象实际上就是在我们通过function关键字来定义方法的时候，编译器会吧当前我们所定义的函数通过Function对象的构造方法来使其编程为一个js的内部对象，在我们需要的时候来进行调用。具体的函数对象的内容请参见函数对象的定义和具体详解。当然在JS编辑器定义好函数对象之后会为函数对象添加一个prototype的原型对象的值，当然你也可以理解为表明当前构造函数创建的对象的继承原型。prototype其指向的原型中也有一回调值，指向的是当前的函数对象。

　　当然作为一个对象，函数也是有自己的_proto_属性的。就像一般对象一样，每次定义函数之后解析器生成函数对象的时候都会为其定义一个_proto_的值，而其指向的实际上就是它的构造函数（即Function对象）的prototype属性指向的原型函数。由于所有的函数对象的构造函数都是Function，所以其实包括Function本身（Function可以理解为函数对象的构造方法，所以也可以看成是一个构造函数。），所有的函数对象的_proto_的值实际上都指向一个Function.prototype原型对象，而这一对象的原型是Object对象。

 

原型链：

　　但是之所以叫做原型链是为什么呢，因为不论是一般对象中的_proto_还是函数对象中的prototype属性，其指向的内容实际上还是一个对象，而只要是对象就会有这两个属性中的一个或者两个都有。就像上面的图中所显示的那样。每一个对象实际上都会指向他的原型对象，而原型对象又指向更高一层的原型，最终总有一个原型对象是会指向Object对象的，而object对象的原型是null。就像一个树一样逐层的深入。这样就形成了链，所以我们称之为原型链。

　　

　　

 

转载于:https://www.cnblogs.com/pingchuanxin/p/5747678.html