Objects & Prototypes

Question 1

If we want to create more than one instance of an object, here is one (bad) way to do it. What is wrong with this approach?

function Animal(name) {
  let animal = {};
  animal.name = name;
  animal.eat = function(amount) {
    console.log(`${this.name} is eating.`);
  };
  return animal;
}

const leo = Animal('Leo');
const snoop = Animal('Snoop');

Answer 1

This is wasteful of space because every instance of the object has a copy of all the method definitions.

Question 2

What does Object.create do?

Answer 2

Object.create allows you to create an object which will delegate to another object on failed lookups. In other words, it creates a new object, using an existing object as the prototype of the newly created object.

const animalMethods = {
  eat(amount) {
    console.log(`${this.name} is eating.`);
  }
};

function Animal(name) {
  let animal = Object.create(animalMethods);
  animal.name = name;
  return animal;
}

const leo = Animal('Leo');
leo.eat(10);

(Instead of using Object.create you could call new)

Question 3

What is a prototype?

Answer 3

A prototype is another object that is used as a fallback source of properties. When an object gets a request for a property that it does not have, its prototype will be searched for the property, then the prototype’s prototype and so on.

Question 4

If you try to access a property that does not exist directly on an object, what happens?

Answer 4

The prototype of that object will be searched for the prototype, then the prototype’s prototype and so on.

Question 5

What happens when a function is called with the new keyword?

Answer 5

new will:

1. Create a blank, plain JavaScript object.
2. Points the new object’s \_\_proto\_\_ to the constructor function’s prototype property.
3. Executes the constructor function with the given arguments, binding the new object as the this context. All references to this in the constructor function now refer to the new object.
4. Constructor function returns the new object by default. (Can return something else though if you want.)

function Animal(name) {
  //// The `new` keyword creates the object 
  // const this = Object.create(Animal.prototype);
  ////
  
  this.name = name;
  
  //// The `new` keyword returns it
  // return this;
  ////
}

Animal.prototype.eat = function(amount) {
  console.log(`${this.name} is eating.`);
}

// Note: must use `new` keyword
const leo = new Animal('leo');

Question 6

How do you define a constructor for a JavaScript class? What do you use for its name?

Answer 6

It’s called constructor.

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat(amount) {
    console.log(`${this.name} is eating.`);
  }
}

const leo = new Animal('Leo');

Question 7

How do you define a method on a JavaScript class? What does the signature look like?

Answer 7

Function name followed by arguments in parentheses. Don’t need the keyword function.

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat(amount) {
    console.log(`${this.name} is eating.`);
  }
}

const leo = new Animal('Leo');

Question 8

What is the prototype property?

Answer 8

prototype is a property of a Function object. It is used as the prototype of objects constructed by that function. It specifies what will be assigned as __proto__ for all instances of objects created by the given function when used as a constructor.

It is a property of constructor functions, not on the instances themselves.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
console.log(myPoint.\_\_proto\_\_ == Point.prototype);
console.log(myPoint.\_\_proto\_\_.\_\_proto\_\_ == Object.prototype);
console.log(myPoint instanceof Point);
console.log(myPoint instanceof Object);

Question 9

What is the __proto__ property?

Answer 9

__proto__ is an internal property which is the actual object that is used in the lookup chain to resolve methods.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
console.log(myPoint.\_\_proto\_\_ == Point.prototype);
console.log(myPoint.\_\_proto\_\_.\_\_proto\_\_ == Object.prototype);
console.log(myPoint instanceof Point);
console.log(myPoint instanceof Object);

Question 10

What keyword do you use to inherit from another class?

Answer 10

Use extends.

class Dog extends Animal {
  constructor(name, breed) {
    super(name);

    this.breed = breed;
  }

  bark() {
    console.log('Woof');
  }
}

Question 11

When inheriting from another class, how do you invoke the base class’s constructor function?

Answer 11

Call super.

class Dog extends Animal {
  constructor(name, breed) {
    super(name);

    this.breed = breed;
  }

  bark() {
    console.log('Woof');
  }
}

Question 12

What’s the difference between prototypal and classical inheritance?

Answer 12

A class is something that exists only at compile-time. Inheritance happens statically at compile-time. Before the prgoram runs the accumulated members of the parent objects are combined and flattened such that the instance is a single, flat block of memory.

JavaScript objects have a link to a prototype object, which can change at runtime. Since everything is created and looked up at runtime that means we can change, on the fly, what an object inherits.

Question 13

What does this do and why would you want to do this?

const x = Object.create(null);

Answer 13

This creates a new object with no prototype, meaning it inherits no properties or methods from the default Object.prototype.

You can use it if you want a completely empty object without any inherited properties, like if you wanted a simple map and you only care about key-value pairs.

You could instead use the Map object though.