zoukankan      html  css  js  c++  java
  • 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); // 人类
    复制代码

     

       (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); // 人类

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

        未完待续》》

  • 相关阅读:
    Time Zone 【模拟时区转换】(HDU暑假2018多校第一场)
    HDU 1281 棋盘游戏 【二分图最大匹配】
    Codeforces Round #527 (Div. 3) F. Tree with Maximum Cost 【DFS换根 || 树形dp】
    Codeforces Round #527 (Div. 3) D2. Great Vova Wall (Version 2) 【思维】
    Codeforces Round #527 (Div. 3) D1. Great Vova Wall (Version 1) 【思维】
    Codeforces Round #528 (Div. 2, based on Technocup 2019 Elimination Round 4) C. Connect Three 【模拟】
    Avito Cool Challenge 2018 E. Missing Numbers 【枚举】
    Avito Cool Challenge 2018 C. Colorful Bricks 【排列组合】
    005 如何分析问题框架
    004 如何定义和澄清问题
  • 原文地址:https://www.cnblogs.com/libin-1/p/5769155.html
Copyright © 2011-2022 走看看