之前对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. ASP.NET MVC Filter- 登录验证 【异步刷新列表视图】

    public class TAjaxListLoginValidateAttribute : FilterAttribute, IAuthorizationFilter { public void O ...

  2. MyBatis日志配置

    关于MyBatis的日志,其实MyBatis已经弄得很好了,你甚至都不用配置,只要导入了jar包,MyBatis就会自动寻找. 具体步骤 1.导入jar包,就是把下载MyBatis时,lib里的包复制 ...

  3. 10、代码块、构造代码块、静态代码块及main方法之间的关系

    1.普通代码块: 在方法或语句中出现在{}之间的类容就称为普通代码块,简称代码块.普通代码块和一般的语句执行顺序由他们在代码中出现的次序决定--“先出现先执行”,即顺序执行. /*下面第一个类时合法的 ...

  4. 【Win10】SplitView控件

    SplitView是Win10中的新控件. 用于呈现两部分视图. 一个视图是主要内容,另一个视图是用于导航.(也就是通常说的汉堡菜单.) 主要结构: <SplitView> <Spl ...

  5. html5第二天

    哎..以为自己能每天坚持写呢.前面8天一直在D3的东西..都没有时间研究html5.草草的翻了一下HTML5和CSS3权威指南.对整个页面设计有了一个大概的把握,但是让自己做肯定还会有写问题.暂时ht ...

  6. 微信共享收货地址 edit_address:fail 吐白沫级解决方案

    又被微信坑了一整天,看完官方文档怎么测试都不通过,我一直怀疑是新版本微信支付我没有设置“共享收货地址”开关造成的. 后来经过验证,新版本不需要做这件事了. 那么,我没错,是微信的文档没及时更新... ...

  7. Maximal Rectangle

    很不好想的一道题,参考:http://blog.csdn.net/doc_sgl/article/details/11832965 分为两步:把原矩阵转为直方图,再用largest rectangle ...

  8. 天河微信小程序入门《四》:融会贯通,form表单提交数据库

    天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

  9. (原创)RecyclerView结合xUtils2.6实现滚动时不加载item,xUtils2.6的源码分析与改造

    我们知道xUtils中的bitmapUtils与listview相配合可以实现滚动时暂停加载 只需要一句话: listview.addOnScrollListener(new PauseOnScrol ...

  10. flask源码分析

    本flask源码分析不间断更新 而且我分析的源码全是我个人觉得是很beautiful的 1 flask-login 1.1 flask.ext.login.login_required(func),下 ...