Object Oriented JavaScript

Notes for https://www.youtube.com/watch?v=4l3bTDlT6ZI

• Access object’s properties

  // Method 1
  user.email
  // Method 2
  user['email']

  • Method 2 is useful to utilize dynamic properties, for example

    let prop = 'name'
    user[prop]
    prop = 'email'
    user[prop]
    // In this case, user.prop will not work

• Classes in ES6 - Blueprints

  class User {
      constructor(email, name) {
          this.email = email;
          this.name = name;
      }
  }
  // the 'new' keyword
  // - creates a new empty object {}
  // - sets the value of 'this' to the new empty object
  // - calls the constructor method
  
  const userOne = new User('yoshi@gmail.com', 'Yoshi');

• Class methods

  class User {
      constructor(email, name) {
          this.email = email;
          this.name = name;
      } // no comma here
      login() {
          console.log(this.email, 'logged in');
      }
  }
  userOne.login();

• Method chaining

  class User {
      constructor(email, name) {
          this.email = email;
          this.name = name;
          this.score = 0;
      } // no comma here
      login() {
          console.log(this.email, 'logged in!');
          return this; // chain methods
      }
      updateScore() {
          this.score++;
          return this; // chain methods
      }
  }
  
  userOne.login().updateScore().updateScore().logout();

• Class inheritance

  • If create users as admins, who has methods as regular users, but also has methods specific to admins

    class Admin extends User {
        deleteUser(user) {
            users = users.filter((u) => u.email !== user.email);
        }
    }
    
    const users = [userOne, userTwo];

• Prototype model

  function User(email, name) {
      this.email = email;
      this.name = name;
      this.online = false;
  }
  User.prototype.login = function(){
      this.online = true;
      console.log(this.email, 'has logged in!');
  }
  
  const userOne = new User('email', 'Yoshi');

• Prototype inheritance

  • To create an admin constructor function

    function Admin(...args){ // get all parameters in an array
        User.apply(this, args);
    }
    Admin.prototype = Object.create(User.prototype);
    Admin.prototype.deleteUser = function(){};