非常简单的JavaScript“继承”（带问题的示例）

Question

我在jsfiddle上也有这个运行示例
样本：

function Animal(o) {
    o.class = Animal;
    o.name = o.name ? o.name : "Animal"; // Defaults
    o.age = o.age ? o.age : 0; // Defaults
    o.weight = o.weight ? o.weight : 0; // Defaults
    o.say = o.say ? o.say : "?";

    Animal.isOnEarth = true; // "static variable"

    return o;
}
function Cow(o) {
    o.class = Cow;        
    o.name = o.name ? o.name : "Cow"; // Defaults
    o.milk  = o.milk ? o.milk : 0; // Defaults
    o.say = o.say ? o.say : "MOOO";

    return Animal(o); //Inheritence
}
function Dog(o) {
    o.class = Dog;        
    o.isCrazyLab = o.isCrazyLab ? o.isCrazyLab : false;
    o.say = o.say ? o.say : "WOOF";

    return Animal(o) //Inheritence;
}

function Labradore(o) {
    o.class = Labradore;        
    o.isCrazyLab = o.isCrazyLab ? o.isCrazyLab : true;
    o.say = o.say ? o.say : "YARRWL";

    return Dog(o) //Inheritence;
}

var cow = Cow({});
var bessy = Cow({name:"bessy",milk:25});
var spot = Dog({name:"spot"});
var hugo = Labradore({name:"hugo"});

document.write("True or false, all these animals live on earth " + Animal.isOnEarth + " A cow says " + cow.say + "... bessy's name is " + bessy.name + " a " + spot.name + " says " + spot.say + " " + hugo.name + " says " + hugo.say);

我正在开发一个小项目，我想实现一种继承类型。我在网上查看了一些示例，但我不太明白为什么在 javascript 中完成修改基本行为的所有繁琐工作很重要。对我来说，感觉就像扩展了 javascript 的类概念，使其“感觉”像另一种语言可能会节省几行代码，但似乎不会添加太多核心功能。不过，我很高兴能上学:)

一些问题
有没有以这种方式工作的库？
有这样做的优点和缺点的在线示例吗？
有没有根本原因不这样做？
有什么一般想法吗？

Answer 1

这并不是真正的继承，它基本上是复制。术语在这里并不一定重要。 :-)

我看到的主要缺点是：

• instanceof

  不起作用
• 你会失去 JavaScript 提供的跨实现共享资源的机制（原型链）。
• 这令人惊讶，与语言中定义的其他对象不一致。我不希望总是将对象传递给构造函数，并且我希望将

  new

  与它们一起使用。
• 没有明确的方法来调用“超级”版本的函数。

---

题外话：一些注意事项：

• class

  是 JavaScript 中的保留字。您不应该将其用作标识符，就像您不会使用

  for

  或

  if

  作为标识符一样。

• 您可以使用功能强大的

  ||

  运算符来简化一点，例如：

  o.name = o.name || "Cow"; // Defaults
  

Answer 2

我自己的问题如下：

document.write(hugo.class == Animal) // true
document.write(hugo.class == Labradore) // false

Answer 3

我最近开始使用 John Resig 的“Simple JavaScript Inheritance”脚本。 （John Resig 是 jQuery 的负责人：天才。如果您还没有阅读过他的文章，我强烈建议您阅读一下。

这个语法对我来说看起来更干净并且更不容易出错：

var Animal = Class.extend({
    name : "Animal",
    age : 0,
    weight : 0,
    say : "?"
});
Animal.isOnEarth = true; // "static variable"

var Cow = Animal.extend({
    name: "Cow",
    milk: 0,
    say: "MOOO"
});

Answer 4

JavaScript 的强大功能之一是使用关键字

extend

来扩展现有类，以及如何重写父类函数：

 // class 
         class BackPack{
            constructor(name,volume, lidOpen, strapLenL, strapLenR){
                this.name = name;
                this.volume = volume;
                this.strapLength = {
                    Left: strapLenL,
                    Right: strapLenR
                },
                this.lidOpen = lidOpen
            }
        
            // toggle method
            toggleLid(lidOpen){
                this.lidOpen = lidOpen;
            }
            // strap len change method
        
            changeStrapLen(strapLenL, strapLenR){
                this.strapLength.Left = strapLenL;
                this.strapLength.Right = strapLenR;
            }
        }
        
        const obj = new BackPack('Musa Bag', 44,true, 10,15);
        
        console.log(obj);
        
        // inheritance in javascript 
        class WorkingBackPack extends BackPack{
        
            constructor(name,volume, lidOpen, strapLenL, strapLenR, lapTopQty, hasChargingInterface){
                    super(name,volume, lidOpen, strapLenL, strapLenR);
                    this.lapTopQty = lapTopQty;
                    this.hasChargingInterface = hasChargingInterface;
            }
        
            addNewLaptop(){
                if(this.lapTopQty == 2){
                    console.log("You cannot add more than 2 laptops");
                }
                else{
                    this.lapTopQty++;
                }
            }
        
            // overriding a parent class method 
            toggleLid(lidOpen){
                super.toggleLid(lidOpen);
            }
        
        }
        
        const workingStation = new WorkingBackPack('Luqman Backpack', 33,false,15,10,1,true);
        
        console.log(workingStation);
        
        workingStation.addNewLaptop();
        
        console.log(workingStation.lapTopQty);
        
        console.log(workingStation.addNewLaptop());