• JavaScript继承


          很久之前就看了有关JavaScript继承,都没怎么总结,刚好今天有空就来聊聊呗 (^o^)/

      通过不断试验 来检验自己理解的正确性。


      首先JavaScript里面所有的数据类型都是对象(object),其中的new命令引入Javascript,用来从原型对象生成一个实例对象。

      (这里请注意:在JavaScript中,new命令后面跟的是构造函数)

      1、new运算符

      用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。

      举个栗子:在Man对象的构造函数中,设置一个实例对象的共有属性species。

       function Man(name){
         this.name = name;
         this.species = "男人";
       }

      然后,我生成两个实例对象

       var manA = new Man("Yori");
       var manB = new Man("bentos");

      这两个对象的species属性是独立的,修改其中一个,不会影响到另一个

       manA.species = "超人";
       alert(manB.species); // 弹窗显示"男人",不受manA的影响 

      这说明,每一个实例对象,都有自己的属性和方法的副本,他们之间不仅无法做到数据共享,而且对资源造成浪费

       2、prototype属性

      构造函数有一个prototype属性,这个属性包含一个对象(以下简称"prototype对象"),

      所有实例对象需要共享的属性和方法,都放在prototype对象里面,

      那些不需要共享的属性和方法,就放在构造函数里面。

      再举个栗子:以Man构造函数为例,现在用prototype属性进行改写

       function Man(name){
         this.name = name;
       };
    
    Man.prototype
    = { species : "男人" };
    var manA = new Man("Yori"); var manB = new Man("bento"); alert(manA.species); // 男人 alert(manB.species); // 男人

      因为 species属性放在prototype对象里,是两个实例对象共享的。所以只要我修改了prototype对象,就会同时影响到两个实例对象

       Man.prototype.species = "超人";
    
       alert(manA.species); // 超人
       alert(manB.species); // 超人

        3、构造函数的继承

      现在有一个"人类"对象的构造函数

       function Human(){
         this.species = "人类";
       }

      还有一个"男人"对象的构造函数

       function Man(name){
         this.name = name;
       }

      怎样才能使"男人"继承"人类"呢?

      (1)构造函数绑定

        使用apply方法,将父对象的构造函数绑定在子对象上

        就想举栗子:在子对象构造函数中加一行

        function Man(name){
         Human.apply(this, arguments);
         this.name = name;
       }
       var manA = new Man("Yori");
       alert(manA.species); // 人类

        (apply方法重新定义了函数的执行环境,即改变this的指向)

       (2)prototype模式

        使用prototype属性,如果"男人"的prototype对象,指向一个Human实例,那么所有"男人"的实例,就能继承Human了

        栗子如下:我将Man的prototype对象指向一个Human的实例

       Man.prototype = new Human();
       Man.prototype.constructor = Man;
       var manA = new Man("Yori");
       alert(manA.species); // 人类

       注意:任何一个prototype对象都有一个constructor属性,指向它的构造函数。

            因此我才将Man.prototype对象的constructor值改为Man,即 把这个属性指回原来的构造函数

      4、非构造函数继承

      现在有一个"人类"的对象

      var Human = {
         species : "人类"
       }

      还有一个"男人"的对象

      var Man = {
         name : "Yori"
      }

      怎样才能使"男人"继承"人类"呢?

      (1)object()方法

        使用object()函数,把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起

        又来栗子:首先我会写出object()函数

      function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
      }

        使用的时候,先在父对象的基础上,生成子对象,然后再加上子对象本身的属性

      var Man = object(Human);
    
      Man.name = "Yori";
    
      alert(Man.species); // 人类

        可以看出,子对象已经继承了父对象的属性了。

        未完待续》》

      

  • 相关阅读:
    2019.10.25 csp-s模拟测试87 反思总结
    2020.7.13
    2020.7.12 5. 最长回文子串
    全序列匹配(java)
    2020.7.10 刷题
    Matlab可视化小结
    C-means
    银行家算法(java swing)界面
    完全数——多线程 (Java)
    SIR模型实现(matlab)
  • 原文地址:https://www.cnblogs.com/wuyongyu/p/5769081.html
Copyright © 2020-2023  润新知