DEV Community

loading...

OOP in JavaScript

Brandon Ha
Goona be a king of developer and investor. Follow me @iDevBrandon
・2 min read

If you want to get into stuff like prototype and inheritance, should come constructor first.

constructor

calcAge is constructor function

// Person constructor
function Person(name, dob) {
  this.name = name;
  console.log(this); // refer to the object
  this.birthday = new Date(dob);
  this.calcAge = function () {
    const diff = Date.now() - this.birthday.getTime();
    const ageDate = new Date(diff);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
  };
}

console.log(this); // refer to window

const brad = new Person("Brad", "9-10-1999");
const john = new Person("John");

console.log(brad);
Enter fullscreen mode Exit fullscreen mode

this key word is very important. "this" refers to the instance of the object.

prototype
give proto (this is person prototype)
above Person, there's another proto (Object prototype)

this is how to add a function in prototype

Person.prototype.getMarried = function (newLastName) {
  this.last = newLastName;
};
Enter fullscreen mode Exit fullscreen mode

Prototypal Inheritance
this 2 lines make it happen
Customer.prototype = Object.create(Person);
Customer.prototype.constructor = Customer; // using Customer consturctor

// Person constructor
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

// Greeting
Person.prototype.greeting = function () {
  return `Hello there ${this.firstName} ${this.lastName}`;
};

const person1 = new Person("Joe", "Doe");

console.log(person1.greeting());

// Inherite the Person prototype method
Customer.prototype = Object.create(Person);

// Make cutstomer.prototype return Customer()
Customer.prototype.constructor = Customer;

// Customer consturcor
function Customer(firstName, lastName, number, membership) {
  Person.call(this, firstName, lastName); // call is a function that allows us to call somehwere
  this.number = number;
  this.membership = membership;
}

// create customer
const customer1 = new Customer("Joe", "dan", "123-456", "standard");
console.log(customer1);

// so, now we can use Person method like greeting
console.log(customer1.greeting());
Enter fullscreen mode Exit fullscreen mode

Using Object.create()

const personPrototype = {
  greeting: function () {
    return `Hello there ${this.firstName} ${this.lastName}`;
  },
  getsMarried: function (newLastName) {
    this.lastName = newLastName;
  },
};

const brad = Object.create(personPrototype, {
  firstName: { value: "Brad" },
  lastName: { value: "Traversy" },
  age: { value: 36 },
});
Enter fullscreen mode Exit fullscreen mode

ES6 Classes

// ES5
function Person(firstName, lastName, dob) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.birthday = new Date(dob);

  Person.prototype.greeting = function () {
    return `Hello there ${this.firstName} ${this.lastName}`;
  };
}

// ES6
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  greeting() {
    return `Hello ${this.firstName} ${this.lastName}`;
  }

  calcAge() {
    const diff = Date.now() - this.birthday.getTime();
    const ageDate = new Date(diff);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
  }

  getsMarried(newLastName) {
    this.lastName = newLastName;
  }

  // static method is standalone method
  static addNumbers(x, y) {
    return x + y;
  }
}

const mary = new Person("Mary", "William", 11 - 13 - 96);

mary.getsMarried("gold");

console.log(mary.addNumbers(3, 3)); // not gonna work!
console.log(Person.addNumbers(3, 4));
Enter fullscreen mode Exit fullscreen mode

Sub-Classes

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  greeting() {
    return `Hello there ${this.firstName} ${this.lastName}`;
  }
}

class Customer extends Person {
  constructor(firstName, lastName, number, membership) {
    super(firstName, lastName);
    this.number = number;
    this.membership = membership;
  }
}

const john = new Customer("John", "Doe", "55-555-55", "standard");
console.log(john);

Enter fullscreen mode Exit fullscreen mode

Discussion (0)