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

user_7442735 0
Viewed 56

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

javascript
2 Answers

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();

user_3092400

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();
user_89056010
Related