Pprototypal inheritance in JavaScript

another.example.of.prototype.replacement.js

function Person(name) {
  this.name = name;
}

const a = new Person("a");

try {
  console.log(a.getName()); // Output: TypeError: a.getName is not a function
} catch (e) {
  console.error(e);
}

Person.prototype.getName = function () {
  return this.name;
};

try {
  console.log(a.getName()); // Output: a
  console.log(a.getFalse()); // Output: TypeError: a.getFalse is not a function
} catch (e) {
  console.error(e);
}

Person.prototype = {
  getFalse: function () {
    return false;
  },
};

const b = new Person("b");

try {
  console.log(a.getName()); // Output: a
  console.log(a.getFalse()); // Output: TypeError: a.getFalse is not a function
  console.log(b.getFalse()); // Unreachable
  console.log(b.getName()); // Unreachable
} catch (e) {
  console.error(e);
}

try {
  console.log(b.getFalse()); // Output: false
  console.log(b.getName()); // Output: TypeError: b.getName is not a function
} catch (e) {
  console.error(e);
}

can.not.access.undefined.method.js

function Animal(name) {
  this.name = (name && name) || this.name;
}

{
  let a = new Animal();
  Animal.prototype.name = "Animal";
  Animal.prototype.toString = function () {
    return this.name;
  };
  Animal.prototype.walk = function () {
    console.log(`${this} is walking`);
  };
  a.walk(); // Output: Animal is walking

  try {
    a.jump(); // This will fail because...
    // Output: TypeError: a.jump is not a function
  } catch (e) {
    console.error(`jump method has not been defined yet`, e);
  }

  setTimeout(function () {
    console.warn("attempting to jump now");
    a.jump(); // Output: Animal is jumping
    // Here, it works
  }, 0);

  Animal.prototype.jump = function () {
    console.log(`${this} cant jump`);
  };
  a.jump(); // Output: Animal cant jump

  console.log(a.constructor);
  Animal.prototype.jump = function () {
    console.log(`${this} is jumping`);
  };
  a.jump(); // Output: Animal is jumping
}

prototypal.inheritance.javascript.js

function Animal(name) {
  this.name = (name && name) || this.name;
}

Animal.prototype.name = "Animal";
Animal.prototype.toString = function () {
  return this.name;
};
Animal.prototype.walk = function () {
  console.log(`${this} is walking`);
};

Animal.prototype.jump = function () {
  console.log(`${this} cant jump`);
};

function Rabbit() {}
Rabbit.prototype = new Animal("Rabbit");
Rabbit.prototype.color = "";
Rabbit.prototype.constructor = Rabbit;

Animal.prototype.jump = function () {
  console.log(`${this} is jumping`);
};
Animal.prototype.toString = function () {
  if (this.color) {
    return `${this.color} ${this.name}`;
  }
  return this.name;
};
var r = new Rabbit();
r.walk(); // Rabbit is walking
r.jump(); // Rabbit is jumping

function WhiteRabbit() {
  this.color = "White";
}
WhiteRabbit.prototype = new Rabbit();
var wr = new WhiteRabbit();
wr.walk(); // White Rabbit is walking
wr.jump(); // White Rabbit is jumping
console.log(wr.constructor); // ƒ Rabbit() {}

prototype.method.addition.js

function Animal(name) {
  this.name = (name && name) || this.name;
}

// This section works
{
  let a = new Animal();
  Animal.prototype.name = "Animal";
  Animal.prototype.toString = function () {
    return this.name;
  };
  Animal.prototype.walk = function () {
    console.log(`${this} is walking`);
  };
  a.walk();
}

prototype.replacement.js

function Animal(name) {
  this.name = (name && name) || this.name;
}
// This section won't work
{
  let a = new Animal();
  Animal.prototype = {
    name: "Animal",
    toString: function () {
      return this.name;
    },
    walk: function () {
      console.log(`${this} is walking`);
    },
  };
  a.walk(); // throws an error, because, the entire prototype was replaced

  var b = new Animal(); // this works because b is created after prototype was defined
  b.walk();
}