如何通过原型实现经典的类继承

Question

我想在 JS 中实现以下行为。 请注意语法是象征性的。

这是我的父类

class = TList {
   FList: array;

   function AddElement(Ele) {
        Flist.Add(Ele)
   };

   function RemoveEle(Ele) {
        FList.Remove(Ele)
   };   
}

现在我要继承这个类。我的子类应该自动具有父类的所有属性，并且应该能够在不重写代码的情况下扩展它们。

class = TAlertList(inherit from TList) {

   function AddElement(Ele) {
      Alert('element will be added');
      call.parent.AddElement(Ele)
   };

   function RemoveElement(Ele) {
     call.parent.RemoveElement(Ele);
     Alert('element removed');
   }

}

请注意我如何在我希望的地方继承父方法。

现在我应该能够从我的子类创建一个对象并执行以下操作。

MyAlertList = new TAlertList;
MyAlertList.Add('hello');
console.log(MyAlertList.FList);

我应该能够从 TAlertList 继承更多的子类并能够改变现有的行为。我需要在纯 ES5 中执行此操作而不使用任何库。标准的 OOP 实践是预期的。

Answer 1

请注意TList 构造函数应该应用于TAlertList 实例；

ES5，先设置基础构造函数

function TList() {
    this.Flist = [];
    // ...
}

TList.prototype = {
    constructor: TList,
    AddElement: function AddElement(Ele) {
        this.Flist.push(Ele);
    },
    RemoveEle: function RemoveEle(Ele) {
        var i = this.Flist.lastIndexOf(Ele);
        if (i !== -1)
            this.Flist.splice(i, 1);
    }
};

接下来设置扩展它的构造函数，看看这意味着如何在由扩展构造函数创建的实例上调用基础构造函数并创建一个继承基础构造函数原型的原型对象

function TAlertList() {
    // construct from base
    TList.call(this);
    // further construct
    // ...
}
TAlertList.prototype = Object.create(TList.prototype);
TAlertList.prototype.constructor = TAlertList;

// depending on how you want to reference stuff
TAlertList.prototype.AddElement = function AddElement(Ele) {
    alert('element will be added');
    TList.prototype.AddElement.call(this, Ele);
};
TAlertList.prototype.RemoveElement = function RemoveElement(Ele) {
    TList.prototype.RemoveEle.call(this, Ele);
    alert('element removed');
};

---

ES6 语法使用super 关键字

class TList {
    constructor() {
        this.FList = [];
    }
    AddElement(Ele) {
        this.Flist.push(Ele);
    }
    RemoveEle(Ele) {
        var i = this.Flist.lastIndexOf(Ele);
        if (i !== -1)
            this.Flist.splice(i, 1);
    }
}

class TAlertList extends TList {
    constructor() {
        super();
    }
    AddElement(Ele) {
        alert('element will be added');
        super.AddElement(Ele);
    }
    RemoveElement(Ele) {
        super.RemoveEle(Ele);
        alert('element removed');
    }
}

---

回到 ES5，概括为一个工厂，这样你就可以看到一种如何做到这一点的算法

function extend(baseConstructor, extendedConstructor, prototypeLayer) {
    function Constructor() {
        var i = 0, j = 0, args = Array.prototype.slice.call(arguments);

        i = j, j += baseConstructor.length;
        baseConstructor.apply(this, args.slice(i, j));

        i = j, j = args.length;
        extendedConstructor.apply(this, args.slice(i, j));
    }
    Object.defineProperty(Constructor, 'length', { // fix .length
        value: baseConstructor.length + extendedConstructor.length,
        configurable: true
    });
    Constructor.prototype = Object.create(baseConstructor.prototype);
    Constructor.prototype.constructor = Constructor;
    Object.assign(Constructor.prototype, prototypeLayer);
    return Constructor;
}

那么

function Foo(x) {this.foo = x;}
Foo.prototype.fizz = 1;
var Bar = extend(Foo, function (x) {this.bar = x;}, {buzz: 1});
// ...
var b = new Bar('foo', 'bar');
b.foo; // "foo"
b.bar; // "bar"
b instanceof Foo; // true
b instanceof Bar; // true
b.fizz; // 1
b.buzz; // 1

请注意，这是您在编写每个扩展构造函数时应该遵循的算法示例，而不是生产代码

Answer 2

您的代码如下

function TList(){
  this.FList = [];
}

TList.prototype.AddElement = function(Ele){
 this.FList.push(Ele);
}
TList.prototype.RemoveElement = function(Ele){
 this.FList.splice(Ele,1); //Ele is the index to remove;
}

这是了解继承在 JavaScript 中如何工作的近似值。

function TAlertList (){
     TList.call(this);
}

TAlertList.prototype = Object.create(TList.prototype);
TAlertList.prototype.constructor = TAlertList;

TAlertList.prototype.AddElement = function(ele){
   alert('Element will be added');
   TList.prototype.AddElement.call(this,ele);
};
TAlertList.prototype.RemoveElement = function(ele){
   alert('Element will be remove');
   TList.prototype.RemoveElement.call(this,ele);
};

所以，经典的超级调用是

ParentClass.prototype.myMethod.call(this,args);

Answer 3

这是问答

编辑 - 如果您打算阅读全文，请不要忘记阅读 @paul 的评论。

几乎所有的答案都基于 MDN 文档中关于 JS OOP 的流行“Person”示例。

这个方法背后的理论是把对象的字段放在一个构造函数中，同时在一个原型对象中实现方法。子对象可以通过使用人为的this 值调用构造函数来继承所有字段。它也可以继承所有的方法，方法是让父对象的原型对象与它的原型对象相同。唯一的规则是在实现继承时，您需要使用call 或apply 调用方法以将方法 指向正确的this 对象。

我不喜欢这种方法有两个原因。

1. 对象的字段和方法必须在两个对象之间分开（字段 - 构造函数，方法 - 原型）。这没有独特实体的独特行为的味道——它应该是一个单一的类。

2. 继承时必须指定父对象的名称。这不是自动的。假设对象 C 继承自对象 A。所以，在对象C的方法中，你需要在继承对象A时提及它。 (TList.prototype.AddElement.call(this, Ele);) 如果对象 B 稍后出现在两者之间怎么办？您将不得不更改 C 的所有继承方法以从 B 调用。这绝不是好的继承。

---

我想在 MDN 方法中克服这些问题。我想出了以下模型，没有this 没有call 也没有apply。代码简单易懂。从父对象继承时，您不必提及父对象的名称。所以，一个新的类可以随时在父母和孩子之间加入，而不需要太多的改变。请对此进行讨论并指出该模型的弱点。

这是返回父对象的函数。

function tList() {

   var ret = Object.create(null);

   ret.list = [];

   ret.addElement = fucntion(ele) {
      ret.list.push(ele)
   };

   return ret;

}


//You can create tList object like this: 
var myList = tList();
myList.addElement('foo');

现在是子对象：

function tAlertList() {

   var ret = Object.create(tList());

   //Lets inherit with the fashion of overriding a virtual method
   ret.addElement = function(ele) {

      //Here is new code
      alert('Adding element ' + ele);

      //Automatic inheritance now
      Object.getPrototypeOf(ret).addElement(ele);
   }

   return ret;
}

//Just create the child object and use it
var myAlertList = tAlertList();
myAlertList.addElement('buzz') ;

您可以拥有大子对象并从父对象继承而无需提及他们的名字。假设您必须将tCustomList 放在tList 和tAlertList 之间。您所要做的就是在一个地方告诉tAlertList 从tCustomList 继承。 (var ret = Object.create(tCustomList());) 其他一切都保持不变。

这里是fiddle。

Answer 4

使用纯 ES5，你可以这样做：

function TList() {
   this.FList = []; //not really ideal.
}

TList.prototype.addElement = function(ele) {
   this.FList.push(ele);
};

TList.prototype.removeElement = function(ele) {
   this.FList.splice(this.FList.indexOf(ele), 1);
}

function TAlertList(){
    this.FList = [];
}

TAlertList.prototype = new TList(); //inherit from TList
TAlertList.prototype.constructor = TAlertList; //reset constructor

TAlertList.prototype.addElement = function(ele) {
  alert('element will be added');
  TList.prototype.addElement.call(this, ele);
};

TAlertList.prototype.removeElement = function(ele) {
  alert('element removed');
  TList.prototype.removeElement.call(this, ele);
};

几个笔记：

其父级的FList 属性实际上将在从父级继承的所有对象之间共享，除非被覆盖。这意味着如果你不覆盖FList，你会得到这个：

var a = new TAlertList();
var b = new TAlertList();

a.push(1); //b.Flist === [1]

在我看来，最好将您的子函数命名为与父函数不同的其他名称。这样你就不需要这样做了：

TList.prototype.function.call(this, parameter1, parameter2, ..);

你可以这样称呼他们：

this.function(paremeter1, parameter2);

当然，这不是调用父函数的静态方式，因为您可以用自己的函数覆盖该函数。然后再次TList.prototype.function 不是拥有该功能的对象的父级的功能。为此，您需要使用非标准 ES5 __proto__ 属性。

this.__proto__.function.call(this, parameter1, parameter2, ..);

除非您打算在不同的对象上使用该功能，否则您不需要这样做。