Object prototype

Prototypes are the mechanism by which JS objects inherit features from one another. Every object in JS has a built-in property, which is called its prototype. The prototype is another object, so it will have another prototype.

myObject = {
        city: "Leganes",
        greet() {
                console.log(`Greetings from ${this.city}`);
        }
}
// access the prototype of the object

myObject.__proto__...

When you try to access a property of an object, and it doesn’t have the property, it will search on its prototype, and so on until an undefined prototype.

Shadowing properties

We can shadow a property from a prototype by overwriting it in the instance object.

const myDate = new Date();
  console.log(myDate.getFullYear()); // 2023
  myDate.getFullYear = function() {
           return `The year is ${parseInt(Math.random()*100)+1950}`
  }

console.log(myDate.getFullYear());

Inherit

We can inherit properties from a prototype to create a new instance of an object. When we use the Object.create method to create an instance, we are assigned the original object as the prototype property. This implies the new object will be empty, but the properties of the original object will be accessible.

const myPrototype = {
          name: "randomName",
          age: 0,
          pos: [0, 0]
  }
  const instance = Object.create(myPrototype);
// The object is empty
console.log(instance === myPrototype);
console.log(instance.__proto__ == myPrototype);

console.log(instance);
console.log(instance.name) // randomName
myPrototype.name = "new name";
instance.age = 19;
console.log(instance.name); //new name
console.log(instance);
console.log(myPrototype);

Instead of it, you can use the Object.assign method which copies all enumerable properties from one or more objects to a target object (the first argument) and return it.

const myPrototype = {
          name: "randomName",
          age: 0,
          pos: [0, 0]
  }
  const instance = Object.assign({}, myPrototype);
// The object is empty
console.log(instance === myPrototype);
console.log(instance.__proto__ == myPrototype);

console.log(instance);
myPrototype.name = "new name";
instance.age = 19;
console.log(instance);
console.log(myPrototype);

If we want to replicate the Object.create method with the Object.assign we can do it because all Objects in JS have the prototype property.

const myPrototype = {
        name: "randomName",
        age: 0,
        pos: [0, 0]
}
const instance = {};

Object.assign(instance.__proto__, myPrototype);

  console.log(instance);
  myPrototype.name = "new name";
  instance.age = 19;
  console.log(instance);
  console.log(instance.name);
  console.log(myPrototype);