在 javascript 中修改继承数组而不更改其父数组的最佳方法是什么

Question

I want to make an object that inherits from an other object. In constructing the descendant, i want to push some items to an inherited array without changing the parentobject.

Say I have an object called basket:

function Basket(){
}

Then i fill it like this:

Basket.prototype {
    “price”: 5,
    “contents” : [“apple”, “orange”, “grape”]
}

Now i want to extend this. I want to add some properties and change some. I did this:

function BigBasket(){
    this.price = 6; // change a property. This goes well, when an instance is created, price is still 5 in prototype and also in instances of Basket and it is 6 in the instance that is created from this descendant.
    this.greetingcard = “Congratulations” // add a property. Goes well

Now i want to add an item to the contents-property but only in the descendant instances.

This goes wrong:

    this.contents.push(“banana”); 

It seems this.contents contains a reference to the array of the prototype so when pushing a banana to it, means that instances of both Bigbasket and Basket get a banana in their contents as well. Therefore i first made a copy of the Basket.contents (the parent contents) like this:

    this.contents = Object.getPrototypeOf(this).contents.slice(); // seems __proto__ is deprecated, so using getPrototypeOf here and then pushed the banana:
    this.contents.push(‘banana’);
}

This seems to be working, but is this the right way? I know array is an object as well, so i tried this:

    this.contents = Object.create(Basket.prototype.contents);
    this.contents.push('banana');

This works too and seems a more generic way. Furthermore in Chrome the item that was pushed last was a property of only the descendant while the rest of the array-items were properties of the prototype. Seems elegant to me.

Still, this looks a bit clumsy to me. Am i doing this all wrong? Tried to find out but couldn't find anything on the topic of array's in extending objects. Is there a way of making descendants where all properties are copied and not referenced when instanciated?

Thanks!

Answer 1

You can try something like this:

• Instead of putting price and content on prototype, make them as properties of Basket .
• Inherit BigBasket and set its prototype as instance of Basket . This will give you access to properties of Basket.
• Define a private variable content in BigBasket whose job will be to maintain the child's content.

• Add a setter function to mutate this variable

  • addContent : Add new values to child's content
  • removeContentByIndex : to remove value based on index.
  • getContent : This will return a copy of content to nullify side effect. This will also allow you to have custom definition of content. In this case, its own content + parent's content

  this will allow you to define an API to communicate with content and also allows you to create a restrict data that is exposed. Exposing everything can cause issues. Exposing what is required is always better.

Note: Having objects on prototype can cause issues as objects will have side effect. You should use Parent's values as default values only.

 function Basket() { this.price = 5; this.contents = ["apple", "orange", "grape"] } function BigBasket() { const content = []; this.price = 6; this.greetingcard = "Congratulations"; this.addContent = function(value) { content.push(value); } this.removeContentByIndex = function(index) { content.splice(index, 1); } this.getContents = function() { return [].concat(this.__proto__.contents, content); } } BigBasket.prototype = new Basket(); const bb1 = new BigBasket(); const bb2 = new BigBasket(); bb1.addContent('banana'); console.log(bb1.getContents(), bb2.getContents())