【问题标题】:Javascript inheritance with super() call使用 super() 调用的 Javascript 继承
【发布时间】:2012-04-04 14:20:41
【问题描述】:

我有一些伪类共享它们的大部分初始化。我决定取消这个初始化并创建一个基类,它们将从中继承。

function BaseClass(param1, param2) {
    ...
}

function SubClassA(param1) {
    ...
}

function SubClassB(param1) {
    ...
}

我希望SubClass1SubClass2 通过以下方式从BaseClass 继承:

SubClassA(param1) 构造函数调用BaseClass(param1, "I am A.")

SubClassB(param1) 构造函数调用BaseClass(param1, "I am B.")

所以BaseClass 为它们添加了一些属性。然后两个子类都自己做一些初始化。

现在我不能只做SubClassA.prototype = new BaseClass(),因为我希望超级构造函数接受参数。如何优雅地做到这一点?

【问题讨论】:

    标签: javascript inheritance


    【解决方案1】:
    function SubClassA(param1) {
        BaseClass.call(this, param1, "I Am A.");
    }
    
    function SubClassB(param1) {
        BaseClass.call(this, param1, "I Am B.");
    }
    

    当您执行new SubClassA(param1)new SubClassB(param1) 时,将使用适当的参数调用基本构造函数。

    另外,除了SubClassA.prototype = new BaseClass() 之外,还有其他方式来定义基类。您可以查看this 问题了解一些详细信息。 (免责声明:这个问题是我提出的。)

    【讨论】:

    • 啊,我没有想到 call()。好的,谢谢 ;) @kiswa,如果你不介意,我会接受 taskinoor,因为他是第一张海报 :)
    • 对我来说似乎很公平。但请随时为两者投票! ;) 另外,如果您有兴趣,我添加了指向 MDN 的链接以获取更多详细信息。
    • param 是指param1 吗?还是反过来?
    【解决方案2】:

    我制作了一个名为Class.js - https://github.com/eppz/eppz-jsObjective-JavaScript 助手 - soley 就是因为这个原因(无需应用任何额外的样板代码,也减少了原型的麻烦)。

    使用它,您可以轻松地进行以下设置:

    var BaseClass = Class.extend
    ({
        param1: null,
        param2: null,
    
        construct: function(param1, param2)
        {
            this.param1 = param1;
            this.param2 = param2;
        },
    });
    
    var SubClassA = BaseClass.extend
    ({
        construct: function(param1)
        {
            this.super.construct(param1, 'This is A.');
        },
    });
    
    var SubClassB = BaseClass.extend
    ({
        construct: function(param1)
        {
            this.super.construct(param1, 'This is B.');
        },
    });
    
    var a = new SubClassA('A stuff.');
    var b = new SubClassB('B stuff.');
    
    console.log(a.param1); // A stuff.
    console.log(b.param1); // B stuff.
    
    console.log(a.param2); // This is A.
    console.log(b.param2); // This is B.
    

    【讨论】:

      【解决方案3】:

      我有类似的东西,我这样做:

      function SubClass (param1) {
          BaseClass.call(this, param1, "I am A.");
      }
      

      这给了我BaseClassSubClass 的实例对象上的所有属性。

      编辑:这是the call function 的一些信息。它很有用,因为您可以在调用期间指定 this 是什么并提供参数列表。

      【讨论】:

        【解决方案4】:

        在 Rectangle 的原型中添加一个 area 方法。创建一个满足以下条件的 Square 类:

        1. 它是 Rectangle 的子类。
        2. 它包含一个构造函数,没有其他方法。
        3. 可以使用 Rectangle 类的 area 方法打印 Square 的面积

          class Rectangle {
          
            constructor(w, h) {
             this.w = w;
              this.h = h;
            }
          } 
          Rectangle.prototype.area = function()
          {
            var a = this.w * this.h;
            return a;
           }
           class Square extends Rectangle{
               constructor(r) {
                  super(r, r)
                 }
            }
          
            const rec = new Rectangle(3, 4);
            const sqr = new Square(3);
          
            console.log(rec.area());
            console.log(sqr.area());
          

        【讨论】:

          【解决方案5】:

          这里是一个使用 super 关键字继承的例子

              class Animal {
            constructor(animalName, country) {
              this.animalName = animalName;
              this.country = country;
            }
          
            update(animalName=null, country=null) {
              if (animalName) {
                this.animalName = animalName;
              }
              if (country) {
                this.country = country;
              }
            }
          
            show() {
              console.log("A");
              console.log("Animal Name: ", this.animalName);
              console.log("Animal Country: ", this.country);
            }
          }
          
          animal = new Animal("Elephant", "India");
          animal.show();
          animal.update();
          animal.show();
          animal.update("Dog");
          animal.show();
          animal.update(null, "Africa");
          animal.show();
          animal.update("Whale", "Antartica");
          animal.show();
          
          class Whale extends Animal {
            constructor(name, animalName, country) {
              super(animalName, country);
              this.name = name;
            }
          
            updateName(name=null) {
              if (name) {
                this.name = name;
              }
            }
          
            show() {
              console.log("W");
              super.show();
              console.log("Penguin Name: ", this.name);
            }
          }
          
          whale = new Whale("Ele", "Whale", "Goa");
          whale.show();
          whale.updateName();
          whale.show();
          whale.updateName("Molly");
          whale.show();
          whale.updateName(null);
          whale.show();
          animal.update("Ants");
          whale.show();
          animal.update(null, "Australia");
          whale.show();
          animal.update("Mites", "New Zealand");
          whale.show();
          
          class Penguin extends Animal {
            constructor(name, animalName, country) {
              super(animalName, country);
              this.name = name;
            }
          
            updateName(name=null) {
              if (name) {
                this.name = name;
              }
            }
          
            show() {
              console.log("P");
              super.show();
              console.log("Penguin Name: ", this.name);
            }
          }
          
          penguin = new Penguin("Molly", "Penguin", "Goa");
          penguin.show();
          penguin.updateName();
          penguin.show();
          penguin.updateName("Pikachu");
          penguin.show();
          penguin.updateName(null);
          penguin.show();
          animal.update("Cat");
          penguin.show();
          animal.update(null, "Russia");
          penguin.show();
          animal.update("Seal", "Artic");
          penguin.show();
          

          你可以在这里试试这个代码:https://repl.it/@VinitKhandelwal/inheritance-javascript

          【讨论】:

            猜你喜欢
            • 2016-06-24
            • 1970-01-01
            • 2017-07-30
            • 2016-06-27
            • 2019-04-07
            • 2020-05-15
            • 2018-11-06
            • 1970-01-01
            • 2016-03-12
            相关资源
            最近更新 更多