Prototypes, Classes and OOP

Prototypes

function Person(first, last, age, gender, interests) {
  this.name = {
    'first': first,
    'last' : last
  };
  this.age = age;
  this.gender = gender;
}

• Prototypes are the mechanism by which JavaScript objects inherit features from one another.
• if you call a method on person1 that is defined on Object.prototype (i.e. person1.ValueOf()) the browser initially checks to see if the person1 object has a valueOf() method available on it, as defined on its constructor, Person(), and it doesn’t. So the browser checks to see if the person1’s prototype object has a valueOf() method available on it. It doesn’t, then the browser checks person1’s prototype object’s prototype object, and it has. So the method is called, and all is good!

Factory Functions

javascript-factory-functions A factory function is a function that returns a new object.

The following creates a person object named john:

let john = {
    firstName: 'John',
    lastName: 'Doe',
    getFullName() {
        return this.firstName + ' ' + this.lastName;
    }
};

The more object you want to create, the more duplicate code you need to copy. To avoid copying the same code all over again and again, you can develop a function that creates the person object:

function createPerson(firstName, lastName) {
    return {
        firstName: firstName,
        lastName: lastName,
        getFullName() {
            return firstName + ' ' + lastName;
        }
    }
}

To avoid repeating the same getFullName() function in the memory, you can remove the getFullName() method from the person object and move this method to another object:

const behavior = {
    getFullName() {
        return this.firstName + ' ' + this.lastName;
    }
}

And before calling the getFullName() method on the person object, you can assign the method of the behavior object to the person object as follows:

let john = createPerson('John', 'Doe'),
john.getFullName = behavior.getFullName;
console.log(john.getFullName());

It’ll more difficult if you have many methods and have to assign them manually. This is why the Object.create() method comes into play.

function createPerson(firstName, lastName) {
    let person = Object.create(behavior);
    person.firstName = firstName;
    person.lastName = lastName;
    return person;
}

In practice, you will rarely see the factory functions. Instead, you will see the function constructors or the classes.

Constructor Functions

what-are-javascript-constructor-functions

function Person(name, age) {
  this.name = name;
  this.age = age;
    this.greet = function(){
   return `Hi ${this.name}`;
  }
}

this is an object that has the data of the object instance created by the new keyword. With this function, we can create a new Person object by writing:

let person = new Person('Joe', 10);

In the Person function, this.name and this.age are properties of object instances that are created with the new operator. this.name of the person object would have the value ‘Joe’, and this.age would have the value 10.

Classes

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

Extends and Super Keywords

The extends keyword is used in class declarations or class expressions to create a class that is a child of another class.

The super keyword is used to access and call functions on an object’s parent. When used in a constructor, the super keyword appears alone and must be used before the this keyword is used.

class Pet {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    eat(){
        return `${this.name} is eating`;
    }
}
class Cat extends Pet {
    constructor (name, age, livesLeft = 9){
        super(name, age);
        this.livesLeft = livesLeft;
    }
    meow(){
        return 'miao';
    }
}