zoukankan      html  css  js  c++  java
  • 原型链、prototype、_proto_那些事

    一、概念

    1、Prototype:每一个构造函数都有一个原型对象,这个对象就是Prototype。这个构造函数如何找到他的原型对象呢?每个构造函数都会有一个prototype属性,指向它的原型对象。这就是相当于构造函数的一个属性,注意它不是原型链中的那个关键的链子。
    2、constructor:每个原型对象都包含一个指向构造函数的指针,这个指针就是constructor,从而实现了构造函数和其原型之间的双向绑定。a.prototype.constructor指向a
    3、_proto _ :所有的对象都含有_proto_标签,a对象有_proto_标签,a.prototype也有_proto_标签。你可以简单的理解为指针。它的作用就是原型链形成的关键,靠它串联起来,它会是指向当前对象的构造函数的原型对象。红宝书中也用[[prototype]]表示,是一个意思
    举个栗子:

    Paste_Image.png

    二、Function.prototype比较特殊

    Paste_Image.png
    如图中所示,右边一列的原型链跟上面讲的没什么两样。但是左边这三个就神奇了,我们都知道所有的原型链的顶端最后都指向Object.prototype。但是他们的构造函数,像Function、Array甚至Object都指向Function.prototype。其实这也好理解,刚刚也说了嘛,他们都是构造函数,既然是函数,当然会乖乖的归在Function.prototype下了。当然最后仍然归一到了Object.prototype!!

    也就是说所有的构造函数的_ _proto_ _如果没有改写的话都是指向Function.prototype。一个函数的constructor都是Function,具体原因看完下面第三部分就明白了。
    Paste_Image.png

    三、红宝书的例子详解

    function SuperType(){
      this.property=true;
    }
    SuperType.prototype.getSuperValue=function(){
      return this.property;
    };
    function SubType(){
      this.subproperty=false;
    }
    //继承了SuperType
    SubType.prototype=new SuperType();
    SubType.prototype.getSubValue=function(){
      return this.subproperty;
    };
    var instance=new SubType();
    alert(instance.getSuperValue());
    

    这个例子是红宝书原型链继承的一个例子,书中也画了图解。作为初学者,可能会犯很多错误,下图就是之前我自以为是的“完善的图”,但其实都是画蛇添足。
    下面是错误示例!!!

    Paste_Image.png
    注意
    上图有很多错误,下面我从上到下的顺序一一指正出来。

    • 1、SuperType的_ proto _属性不是null,而是Function.prototype。

    • 2、SubType的_ proto _属性不是null,而是Function.prototype.

    • 3、SuperType.prototype的_ proto _是最指向Object.prototype,这个是因为手抖,箭头下滑了。

    • 4、SubType.prototype没有constructor属性。这是为什么呢?因为在代码运行到
      SubType.prototype=new SuperType();这步之前还是有constructor属性的并且指向SubType。但是这条语句执行完后,SubType的prototype被重写了,执行完SuperType构造函数得到了一些属性和方法。之前自己的属性方法全部没了。所以现在SubType.prototype并没有constructor,它沿着原型链向上查找,查找到SuperType.prototype才找到。
      所以你执行SubType.prototype.constructor的返回值是SuperType,但是SubType.prototype.hasOwnProperty("constructor")返回值是false。

    • 5、instance.prototype是不存在的,因为只有构造函数具有原型对象。instance只是一个实例,是一个Object。

    • 6、instance.constructor也不存在,理由因为只有prototype原型对象具有constructor属性。instance.constructor返回值是SuperType构造函数,那是因为instance没有这个属性,它向上查找一直查找到SuperType.prototype才找到。

    正确的图解

  • 相关阅读:
    加解密的使用工具总结
    Java Base64编码解码实现
    Java 获取各时区时间,获取当前时间到格林威治时间1970年01月01日00时00分00秒的秒数
    关于时区的时间的详解,比如UTCGMT等
    JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载
    HTTP请求报文和HTTP响应报文
    一名全栈工程师Node.js之路-转
    使用zlib模块实现HTTP服务端与客户端实现传输数据压缩
    为什么要搭建自己的缓存管理模块?
    js 跨域问题常见的五种解决方式
  • 原文地址:https://www.cnblogs.com/cuncunjun/p/6670735.html
Copyright © 2011-2022 走看看