Need some help understanding how to extend a JavaScript class

// generic animal
class Animal {
  // when you create the animal, you need to
  // declare the noise it makes
  constructor(noise) {
    this.noise = noise;
  }
  
  makeNoise() {
    console.log(this.noise);
  }
}

// extension of the base class
class Rat extends Animal {
  // note nothing passed to this constructor
  constructor() {
    // instead, we hard-code
    // the noise it makes
    super("squeak!");
  }
}

const dog = new Animal("woof!");
const rat = new Rat();
dog.makeNoise();

// while not declared on the `Rat` class
// the `.makeNoise()` method is inherited
// from the base `Animal` class
rat.makeNoise();

// generic animal
class Animal {
  // when you create the animal, you need to
  // declare the noise it makes
  constructor(noise) {
    this.noise = noise;
  }
  
  makeNoise() {
    console.log(this.noise);
  }
}

// extension of the base class
class Rat extends Animal {
  // note nothing passed to this constructor
  constructor() {
    // instead, we hard-code
    // the noise it makes
    super("squeak!");
  }
}

const dog = new Animal("woof!");
const rat = new Rat();
dog.makeNoise();

// while not declared on the `Rat` class
// the `.makeNoise()` method is inherited
// from the base `Animal` class
rat.makeNoise();

// factory function that makes an animal
// that makes noise. Note the
// `noise` param being passed when being constructed.
const makeAnimal = (noise) => ({
  // note the lack of `noise` being in the returned
  // object, this makes it "private" and unaccessible
  // outside of the `makeNoise` function
  makeNoise() {
    console.log(noise);
  }
});

// rat factory function
const makeRat = () => ({
  // The spread syntax is used to "prime"
  // the object with the correct methods.
  ...makeAnimal("squeek!"),
  // added method just to show that you can
  // "extend" the object
  move() {
    console.log("PITTER PATTER!");
  }
});

const dog = makeAnimal("WOOF!");
dog.makeNoise(); // output: 'WOOF!'
const rat = makeRat();
rat.makeNoise(); // output: 'squeek!'
rat.move(); // output: 'PITTER PATTER!'

// factory function that makes an animal
// that makes noise. Note the
// `noise` param being passed when being constructed.
const makeAnimal = (noise) => ({
  // note the lack of `noise` being in the returned
  // object, this makes it "private" and unaccessible
  // outside of the `makeNoise` function
  makeNoise() {
    console.log(noise);
  }
});

// rat factory function
const makeRat = () => ({
  // The spread syntax is used to "prime"
  // the object with the correct methods.
  ...makeAnimal("squeek!"),
  // added method just to show that you can
  // "extend" the object
  move() {
    console.log("PITTER PATTER!");
  }
});

const dog = makeAnimal("WOOF!");
dog.makeNoise(); // output: 'WOOF!'
const rat = makeRat();
rat.makeNoise(); // output: 'squeek!'
rat.move(); // output: 'PITTER PATTER!'

// rat factory function
const makeRat = () => {
  const noise = "squeek!";
  return {
    ...makeAnimal(noise),
    move() {
      console.log("PITTER PATTER!");
    },
    scurry() {
      console.log(`PITTER PATTER goes the rat while it says ${noise}!`
    }
  }
};

// rat factory function
const makeRat = () => {
  const noise = "squeek!";
  return {
    ...makeAnimal(noise),
    move() {
      console.log("PITTER PATTER!");
    },
    scurry() {
      console.log(`PITTER PATTER goes the rat while it says ${noise}!`
    }
  }
};

const makeAnimal = (noise) => ({
  // now it's a property and can be accessed/modified
  // via `animal.noise`
  noise,
  makeNoise() {
    // you can use either `noise` or
    // `this.noise` here, since it's a property
    // of the object now
    console.log(noise);
  }
});

const makeAnimal = (noise) => ({
  // now it's a property and can be accessed/modified
  // via `animal.noise`
  noise,
  makeNoise() {
    // you can use either `noise` or
    // `this.noise` here, since it's a property
    // of the object now
    console.log(noise);
  }
});

const makeAnimal = (noise) => ({
  // a getter allows accessing the value
  // via `this.noise` but since there's
  // no setter you can't modify it
  get noise() {
    return noise;
  },
  makeNoise() {
    console.log(noise);
  }
});

const makeRat = () => ({
  ...makeAnimal("squeek!"),
  move() {
    console.log("PITTER PATTER!");
  },
  moreNoise() {
    console.log(`${this.noise} ${this.noise}`)
  }
});

const rat = makeRat();
rat.makeNoise(); // output: 'squeek!'
rat.move(); // output: 'PITTER PATTER!'
rat.moreNoise(); // output: 'squeek! squeek!'

const makeAnimal = (noise) => ({
  // a getter allows accessing the value
  // via `this.noise` but since there's
  // no setter you can't modify it
  get noise() {
    return noise;
  },
  makeNoise() {
    console.log(noise);
  }
});

const makeRat = () => ({
  ...makeAnimal("squeek!"),
  move() {
    console.log("PITTER PATTER!");
  },
  moreNoise() {
    console.log(`${this.noise} ${this.noise}`)
  }
});

const rat = makeRat();
rat.makeNoise(); // output: 'squeek!'
rat.move(); // output: 'PITTER PATTER!'
rat.moreNoise(); // output: 'squeek! squeek!'

<form id="file-upload">
  <label for="uploads">Select PDFs to upload</label>
  <input type="file" multiple accept=".pdf" id="uploads">
  <button type="submit">Upload files</button>
</form>

<form id="file-upload">
  <label for="uploads">Select PDFs to upload</label>
  <input type="file" multiple accept=".pdf" id="uploads">
  <button type="submit">Upload files</button>
</form>