废话篇:

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

正文篇:

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

  上图是首要的:

  

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

一般对象:

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

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

 var test = function(){
var me =this; me.name = "Arvin"; me.showNaem = function(){
alert(me.name);
}
} var t = new test(); //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。就像一个树一样逐层的深入。这样就形成了链,所以我们称之为原型链。

  

  

JS 原型链学习总结的更多相关文章

  1. 深入理解JS原型链与继承

    我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...

  2. JS原型链

    JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...

  3. 深入分析JS原型链以及为什么不能在原型链上使用对象

    在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. js原型链与继承(初体验)

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...

  6. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  7. js 原型链和继承(转)

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  8. 一张图看懂 JS 原型链

    JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...

  9. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

随机推荐

  1. [百度空间] [原]跨平台编程注意事项(三): window 到 android 的 移植

    大的问题 先记录一下跨平台时需要注意的大方向. 1.OS和CPU 同一个操作系统, CPU也可能是不一样的, 比如windows也有基于arm CPU的版本,而android目前有x86,arm,mi ...

  2. 7件你不知道但可以用CSS做的事

    不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...

  3. 金融证券协议FIX/FAST/STEP

    金融信息交换协议FIX是适用于实时证券.金融电子交易的数据通信标准.它是把各类证券金融业务需求流程格式化,使之成为一个可用计 算机语言描述的功能流程,并在每个业务功能接口上统一交换格式.STEP(Se ...

  4. VirtualBox中开启Linux的SSH(CentOS)

    http://my.oschina.net/pangyangyang/blog/177869 第一次干用SSH连接安装在VirtualBox上的Linux的事情,打算买个云空间用用的所以先拿个Cent ...

  5. ubuntu安装 scala

    1. 配置路径 sudo gedit /etc/profile 2.在文件后面加入 export PATH=/home/sendi/scala-/bin:$PATH 3.更新 source /etc/ ...

  6. 深入浅出ES6(八):Symbols

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 你是否知道ES6中的Symbols是什么,它有什么作用呢?我相信你很可能不知道, ...

  7. PowerMockito(PowerMock用法)

    网络上大部分是powermock 的用法, PowerMock有两个重要的注解: –@RunWith(PowerMockRunner.class) –@PrepareForTest( { YourCl ...

  8. JavaWeb笔记——注册登录系统项目思路

    功能:   > 注册   > 登录 --------------------------------- JSP:   * login.jsp  --> 登录表单   * regist ...

  9. 解决yum错误Error: requested datatype primary not available

    服务器信息: [mvj3@sdk2 ~]$ cat /proc/version Linux version 2.6.18-194.el5 (mockbuild@ca-build10.us.oracle ...

  10. Linux命令-date

    [root@localhost ~]# date 2016年 09月 07日 星期三 :: CST [root@localhost ~]# date "+%Y" [root@loc ...