废话篇:

  在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. Mysql 操作

    MySQL命令行导出数据库:1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录如我输入的命令行:cd C:\Program Files\MySQL\MySQL Server ...

  2. js获取服务器时间

    Ajax HTTP Head法原理:一般服务器在发送静态页面的时候(apache, nginx, lighttpd就目前所知)都是会在 HTTP 头里带一个Date的头信息的,那么我用Ajax直接取头 ...

  3. Form的用法

    提交页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  4. Install WindowBuilder for Eclipse

    WindowBuilder官方下载安装说明地址:http://www.eclipse.org/windowbuilder/download.php 先祝各位能顺利安装上!以下是基于Eclipse in ...

  5. 15条规则解析JavaScript对象布局(__proto__、prototype、constructor)

    大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人 ...

  6. SSDP 简单服务发现协议

    http://blog.csdn.net/lilypp/article/details/6631951

  7. Java学习笔记之:Java JDBC

    一.介绍 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用java语言编写 ...

  8. Qt中的键盘事件,以及焦点的设置(比较详细)

    Qt键盘事件属于Qt事件系统,所以事件系统中所有规则对按键事件都有效.下面关注点在按键特有的部分: focus 一个拥有焦点(focus)的QWidget才可以接受键盘事件.有输入焦点的窗口是活动窗口 ...

  9. CreateProcess启动隐藏的外部程序(其实就是CreateDesktop,然后指定STARTUPINFO.lpDesktop)

    HDESK hDesk = CreateDesktop(_T("MyDesk"), NULL, NULL, 0, GENERIC_ALL, NULL); ASSERT(hDesk) ...

  10. ITEM 2 MAC OSX 功能略强大的终端

    iTerm2 iTerm 2 is a terminal emulator for Mac OS X that does amazing things. iTerm2 是一个终端模拟器,官方网站:ht ...