Mastering Hard Parts of JavaScript: Prototype & Class V

Subclassing & Mixins

Exercise 10

Create an object adminFunctionStore that has access to all methods in the userFunctionStore object, without copying them over individually.

const userFunctionStore = {
  sayType: function () {
    console.log("I am a " + this.type);
  },
};

Solution 10

const adminFunctionStore = Object.create(userFunctionStore);

Exercise 11

Create an adminFactory function that creates an object with all the same data fields (and default values) as objects of the userFactory class, but without copying each data field individually.

function userFactory(name, score) {
  let user = Object.create(userFunctionStore);
  user.type = "User";
  user.name = name;
  user.score = score;
  return user;
}

Solution 11

function adminFactory(name, score) {
  const admin = Object.create(adminFunctionStore);
  admin.name = name;
  admin.score = score;
  return admin;
}

Exercise 12

Then make sure the value of the 'type' field for adminFactory objects is 'Admin' instead of 'User'.

Solution 12

adminFunctionStore.type = "Admin";

Exercise 13

Make sure that adminFactory objects have access to adminFunctionStore methods, without copying them over.

function adminFactory(name, score) {
  // Put code here
}

Solution 13

function adminFactory(name, score) {
  const admin = Object.create(adminFunctionStore);
  admin.name = name;
  admin.score = score;
  return admin;
}

Exercise 14

Created a method called sharePublicMessage that logs 'Welcome users!' and will be available to adminFactory objects, but not userFactory objects. Do not add this method directly in the adminFactory function.

const adminFromFactory = adminFactory("Eva", 5);
adminFromFactory.sayType();
// -> Logs "I am a Admin"
adminFromFactory.sharePublicMessage();
// -> Logs "Welcome users!"

Solution 14

userFunctionStore.sharePublicMessage = function () {
  console.log("Welcome users!");
};

Exercise 15

Mixins are a tool in object-oriented programming that allows objects to be given methods and properties beyond those provided by their inheritance. For this challenge, complete the missing code, giving all of the robotMixin properties to robotFido. Do this in a single line of code, without adding the properties individually.

class Dog {
  constructor() {
    this.legs = 4;
  }
  speak() {
    console.log("Woof!");
  }
}

const robotMixin = {
  skin: "metal",
  speak: function () {
    console.log(`I have ${this.legs} legs and am made of ${this.skin}`);
  },
};

let robotFido = new Dog();

robotFido = /* Put code here to give Fido robot skills */;
robotFido.speak()
// -> Logs "I am made of metal"

Solution 15

Object.assign(robotFido, robotMixin);

In JavaScript, each object's [[prototype]] can only refer to one other object (in traditional OOP speak, each class can only extend from one class). How do we give an object extra methods declared elsewhere? Object.assign allows us to to that, the first argument is an object, and the second argument is also an object which has a bunch of methods. It adds those methods to the first object.

This brings to an end our Mastering Hard Parts of JavaScript tutorial series. If you have followed each section and implemented your own solutions, take a moment to reflect just how much you have learnt and how far you have come in your understanding of the hard parts of JavaScript!

I am sure my tutorial series is not without its faults. If you find any errors or a better way of solving any of these exercises, please do leave a comment, or send a PR to the github repo. Thanks!