Can't have access of parent class properties from child class - Javascript

Question

I have Two classes in javascript and I can't get the value propertie of parent class, from the child class.

Parent class is a "Picker", the picker will get a value of the amount of oranges that the 'Picker' should grab, and put them in a array, and than call the truck.

Child class is the 'Truck', the truck receive the amount of oranges that the 'Picker' have in the array.

The problem is that, when the truck tries to get the oranges in the array, it is allways empty and I don't understand why.

This is my code

class Picker {
  constructor() {

    this.orangeBox = [];

  }
  amountOrangesToPick(amount) {
    for (let i = 0; i <= amount; i++) {
      this.orangeBox.push(i);
    }
    return this;
  }
  callTruck() {
    console.log("TRUUUUUUCK");
    console.log(this.orangeBox);
  }
}

class Truck extends Picker {
  constructor() {
    super();
    console.log(this.orangeBox);
  }
}

let picker = new Picker();

picker.amountOrangesToPick(20).callTruck();

let truck = new Truck();

Thank you

Parent-child relationships don't mean that every instance of a child class has access to data of some parent object. They're separate objects. You could even instantiate two different Picker() and they also would not share any of their data. — deceze
– deceze ♦, Commented Apr 8, 2020 at 9:40
If you need that value to be persisted you can make a wrapper class which return a class with this.orangeBox = value you passed and then any instance of wrapper class will have that values — Code Maniac
– Code Maniac, Commented Apr 8, 2020 at 9:48

Misiur · Accepted Answer · 2020-04-08 11:32:15Z

1

You might want just to change the new Picker() to new Truck()

Or you want a factory method:

class Picker {
  orangeBox = [];
  
  amountOrangesToPick(amount) {
    for (let i = 0; i <= amount; i++) {
      this.orangeBox.push(i);
    }

    return this;
  }

  callTruck() {
    console.log("TRUUUUUUCK");
    
    const truck = new Truck();
    truck.orangeBox = this.orangeBox.splice(0);
    
    return truck;
  }
}

class Truck extends Picker {
  constructor() {
    super();
  }
  
  honk() {
    console.log(this.orangeBox);

    return this;
  }
}

const picker = new Picker();
const truck = picker.amountOrangesToPick(20).callTruck().honk();

console.log(truck.orangeBox);

But you should read about dependency injection and inversion of control, for future testing purposes. So, your code should look like this:

class Picker {
  orangeBox = [];
  truck = null;
  
  constructor(truck) {
    this.truck = truck;
  }
  
  amountOrangesToPick(amount) {
    for (let i = 0; i <= amount; i++) {
      this.orangeBox.push(i);
    }

    return this;
  }

  callTruck() {
    console.log("TRUUUUUUCK");
    
    this.truck.orangeBox = this.orangeBox.splice(0);
    
    return truck;
  }
}

class Truck extends Picker {
  constructor() {
    super();
  }
  
  honk() {
    console.log(this.orangeBox);

    return this;
  }
}

const picker = new Picker(new Truck());
picker.amountOrangesToPick(20).callTruck().honk();

edited Apr 8, 2020 at 11:32

answered Apr 8, 2020 at 10:02

Misiur

5,3938 gold badges42 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gabriel costa Over a year ago

There is errors in your code... But i think dependency injection, something like in PHP I wouldn't need to extend 'Truck' to 'Picker'.

Gabriel costa · Accepted Answer · 2020-04-08 11:11:35Z

0

This is how I solved my problem, using the concept of dependency injection like @Misiur said in his answer, but I did a little different, the reason I'm not accepting his answer is because I think my example is cleaner, and using dependency injection, wouldn't need to extend my classes.

class Picker {
orangeBox = [];

amountOrangesToPick(amount) {
    for (let i = 1; i <= amount; i++) {
        this.orangeBox.push(i);
    }

    return this;
}
callTruck() {
    console.log("TRUUUUUUCK");
 }
}

    class Truck {
        picker = null;
   constructor(picker) {
       this.picker = picker;
   }
   getOranges() {
        console.log(this.picker.orangeBox);
   }
}

const picker = new Picker();
picker.amountOrangesToPick(20).callTruck();

const truck = new Truck(picker);
truck.getOranges();

answered Apr 8, 2020 at 11:11

Gabriel costa

1612 silver badges14 bronze badges

1 Comment

Misiur Over a year ago

Your Picker could be named Truckbed as well. You've just discovered something called composition

Collectives™ on Stack Overflow

Can't have access of parent class properties from child class - Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related