Prototypal Inheritance

Prototypes / Inheritance: Prototypal Inheritance

---

What does a prototype refer to in JavaScript?

View Answer:

Interview Response: JavaScript objects inherit features from one another through prototypes. JavaScript sometimes gets defined as a prototype-based language that we use to implement inheritance; objects can have a prototype object that serves as a template object from which it inherits methods and attributes.

Technical Response: Objects in JavaScript feature a special hidden property called [[Prototype]] (as defined in the standard), which is either null or refers to another object. We refer to this object as a prototype. JavaScript objects inherit features from one another through the use of prototypes. Objects can have a prototype object, which acts as a template object from which it inherits methods and properties to provide inheritance. JavaScript commonly gets described as a prototype-based language.

Code Example:

Overview: Historical example using proto, which is now deprecated (no longer supported)

let animal = {
  eats: true,
};
let rabbit = {
  jumps: true,
};

rabbit.__proto__ = animal; // (*) __proto__ deprecated

// we can find both properties in rabbit now:
alert(rabbit.eats); // true (**)
alert(rabbit.jumps); // true

note

You should be familiar with the __proto__ because you may see it in older code.

---

What exactly is a prototype in JavaScript when it comes to objects?

View Answer:

Interview Response: A prototype is a fixed entity called an object. When you declare a function, it generates a prototype related to it. Furthermore, the prototype object establishes a link to its function, resulting in a circular relationship. This behavior applies to any function. Objects get created in various ways in JavaScript, and the new keyword is one method. We apply an uppercase initial letter to the function name when we declare it if we intend on utilizing the "new" keyword. (a constructor function).

Code Example:

// Prototypal Inheritance
function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User('Jack');

console.log(user.name); // Jack
console.log(user.isAdmin); // false
console.log(user instanceof User); // true

---

In JavaScript prototypal inheritance, what is the value of the “this” keyword?

View Answer:

Interview Response: The answer is simple: prototypes do not affect "this", regardless of the method the location in an object or prototype. This structure is always the object before the dot in a method call.

Code Example:

// animal has methods
let animal = {
  walk() {
    if (!this.isSleeping) {
      console.log(`I am walking`);
    }
    console.log("I'm asleep!");
  },
  sleep() {
    this.isSleeping = true;
  },
};

animal.walk(); // returns 'I am walking'

let rabbit = {
  name: 'White Rabbit',
  __proto__: animal,
};

// modifies rabbit.isSleeping
rabbit.sleep();

console.log(rabbit.isSleeping); // true
console.log(animal.isSleeping); // undefined (no such property)

---

How does the for-in loop behave when iterating through inherited properties?

View Answer:

Interview Response: When you loop through the properties of an object that inherits from another, the for...in statement moves up the prototype chain and enumerates the inherited properties.

Code Example:

let decoration = {
  color: 'red',
};

let circle = Object.create(decoration);
circle.radius = 10;

for (const prop in circle) {
  console.log(prop);
}

// Returns radius, color

Code Example: The Old __proto__

let animal = {
  eats: true,
};

let rabbit = {
  jumps: true,
  __proto__: animal,
};

for (let prop in rabbit) {
  let isOwn = rabbit.hasOwnProperty(prop);

  if (isOwn) {
    alert(`Our: ${prop}`); // Our: jumps
  } else {
    alert(`Inherited: ${prop}`); // Inherited: eats
  }
}

---