如何创建或模拟同时继承Array与Serializable类的JavaScript类

Great question! Since JavaScript only supports single inheritance, we can't directly extend both Array and your Serializable-generated class out of the box. But we can use mixins (copying methods/properties) to combine the array functionality with your serialization logic without manually rewriting serialize() and deserialize(). Here's a step-by-step solution:

Step 1: Understand the Serializable Factory #

First, let's assume your Serializable function works like a higher-order class factory (since you're extending Serializable({"_title": "raw"})). It returns a base class with the auto-generated serialize() instance method and deserialize() static method, plus initializes the _title property.

Step 2: Extend Array and Mix in Serializable Functionality #

We'll create a class that first inherits from Array (to get all array features like push(), pop(), length, etc.), then copy the Serializable methods and initialize its properties.

Full Code Example #

// Mock of your Serializable factory (you don't need to write this)
function Serializable(config) {
  return class SerializableBase {
    constructor(title) {
      this._title = title;
    }

    // Auto-generated serialize method
    serialize() {
      // Serialize both the title and array elements
      return JSON.stringify({
        _title: this._title,
        elements: [...this] // Capture array contents
      });
    }

    // Auto-generated static deserialize method
    static deserialize(data) {
      const parsed = JSON.parse(data);
      // Create a new instance with the title and deserialized elements
      return new this(parsed._title, ...parsed.elements);
    }
  };
}

// Your combined class: Array features + Serialization
class ArrayLikeClass extends Array {
  constructor(title, ...elements) {
    // Initialize the Array part first with the provided elements
    super(...elements);
    // Initialize the Serializable part (sets _title)
    const SerializableBase = Serializable({"_title": "raw"});
    SerializableBase.call(this, title);
  }
}

// Mix in Serializable's methods (no manual writing needed!)
const SerializableBase = Serializable({"_title": "raw"});
// Copy instance methods (like serialize()) to ArrayLikeClass's prototype
Object.assign(ArrayLikeClass.prototype, SerializableBase.prototype);
// Copy static methods (like deserialize()) to the class itself
ArrayLikeClass.deserialize = SerializableBase.deserialize;

Step 3: Test the Class #

Let's verify it works as expected:

// Create an instance
const myList = new ArrayLikeClass("Grocery List", "Apples", "Bananas", "Milk");

// Check array features
console.log(myList.length); // 3
myList.push("Bread");
console.log(myList); // ["Apples", "Bananas", "Milk", "Bread"]

// Check serialization
const serialized = myList.serialize();
console.log(serialized); 
// Output: {"_title":"Grocery List","elements":["Apples","Bananas","Milk","Bread"]}

// Check deserialization
const deserialized = ArrayLikeClass.deserialize(serialized);
console.log(deserialized instanceof ArrayLikeClass); // true
console.log(deserialized._title); // "Grocery List"
console.log(deserialized.length); // 4

Alternative: Adjust the Prototype Chain #

If you prefer to keep the class extending Serializable directly, you can rewire the prototype chain so the Serializable base class inherits from Array:

const SerializableBase = Serializable({"_title": "raw"});
// Make SerializableBase's prototype inherit from Array's prototype
Object.setPrototypeOf(SerializableBase.prototype, Array.prototype);

class ArrayLikeClass extends SerializableBase {
  constructor(title, ...elements) {
    super(title);
    // Manually initialize array elements
    elements.forEach((item, index) => this[index] = item);
    this.length = elements.length;
  }
}

// This works too! Array methods like push() will function correctly
const testArr = new ArrayLikeClass("Test", 1, 2);
testArr.push(3);
console.log(testArr.length); // 3

Key Notes #

• The first approach (inherit Array, mix in Serializable) is more reliable because Array's constructor properly initializes the array structure (including the length property and indexed elements) without manual work.
• We avoid rewriting serialize()/deserialize() by directly copying them from the class generated by Serializable, which matches your requirement of not manually adding these methods.

内容的提问来源于stack exchange，提问作者pfg