之前对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。

参考资料

JS 原型链的更多相关文章

  1. JS原型链

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

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

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

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

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

  4. JS 原型链图形详解

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

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

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

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

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

  7. 一张图看懂 JS 原型链

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

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

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

  9. JS原型链与继承别再被问倒了

    原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...

  10. 02 js原型链

    1 js原型链是一个绕不开的话题.直接上说吧. /** * 1. js里的原型链是怎么样的? 带class 和不带class的原型链的不同. */ const util = require('util ...

随机推荐

  1. PHP异步调用多线程

    $data["name"] = 'godlike';$data["age"] = 18; $post = http_build_query($data);$le ...

  2. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  3. vs2015 HTTP Error 400. The request hostname is invalid.

    <site name="> <application path="/" applicationPool="Clr4IntegratedAppP ...

  4. sqlserver事务加锁机制

    锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 脏 ...

  5. 欢迎来到Joyful Physics博客

    本博客主要包括以下内容: 物理课程 预计会涵盖非物理专业普通物理.物理专业普通物理.理论物理(四大力学).凝聚态物理,会特别关注软物质物理,因为博主是做软物质物理的. 软硬科普 软科普写给非专业人士. ...

  6. RabbitMQ 简介

    1. MQ描述 MQ全程为Message Queue,消息队列(MQ)是一种应用程序对应用程序通信的方法.应用程序通过读写出入队列的消息来通信,而无需专用连接来链接它们.消息传递指的是程序之间通过在消 ...

  7. HDOJ 4770 Lights Against Dudely

    状压+暴力搜索 Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  8. 常用快捷键: From Eclipse to Android Studio

    Eclipse: ctrl+shift+L查看所有快捷键 alt+shift+r 重命名 ctrl+shift+F 格式化代码 alt+shift+s  添加未实现方法 alt+/ 代码助手提示 ct ...

  9. window.onload =writeMessage(); 与window.onload =writeMessage;的区别

    window.onload =writeMessage(); window.onload =writeMessage; 异:第一种是window加载时执行writeMesage方法,第二种是把writ ...

  10. Ajax中get请求和post请求

    我们在使用Ajax向服务器发送数据时,可以采用Get方式请求服务器,也可以使用Post方式请求服务器,那么什么时候该采用Get方式,什么时候该采用Post方式呢? Get请求和Post请求的区别: 1 ...