Mastering Hard Parts of JavaScript: Prototype & Class V
Tags: javascript, codenewbie, oop, prototype
Published: 2020-08-26 17:00:24

---
series: Mastering Hard Parts of JavaScript
description: An introduction to JavaScript Prototype & Class using 15 exercises
---
## Subclassing & Mixins

### Exercise 10

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

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

### Solution 10

```js
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.

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

### Solution 11

```js
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

```js
adminFunctionStore.type = "Admin";
```

### Exercise 13

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

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

### Solution 13

```js
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.

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

### Solution 14

```js
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.

```js
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

```js
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!