zoukankan      html  css  js  c++  java
  • JS 原型链

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

    参考资料

  • 相关阅读:
    制作本地 odoo deb包安装镜像
    用Lua实现string的trim()方法
    UGUI之控件以及按钮的监听事件系统
    UGUI之不规则按钮的响应区域
    Unity接第三方SDK时遇到的坑
    AI设计
    Unity UGUI 的RectTransform参数的设置
    Lua string库详解
    lua正则表达式如何匹配中文
    kubernetes pod的生命周期
  • 原文地址:https://www.cnblogs.com/WreckBear/p/5944895.html
Copyright © 2011-2022 走看看