Object Oriented Javascript

Özgün Bal

github:  /ozgunbal

mail: ozgunbal@gmail.com

medium: @ozgunbal

Contents

  • Object introduction
  • Constructor vs Instances
  • Prototypal Inheritance
  • "Class" in Javascript
  • Design patterns
  • References

Object

  • can be created via Object literal or Object constructor
    •  
  • prefer object literal unless you have reasons
  • can take any data structure as a property 
    • number, string, boolean, array, function, object
  • use "delete" for removing a property
  • mutable
  • copied by reference
const obj = {}; // Object literal
const obj2 = new Object(); // Object constructor

from Just Javascript - Dan Abramov and Maggie Appleton

from Just Javascript - Dan Abramov and Maggie Appleton

from Just Javascript - Dan Abramov and Maggie Appleton

Object (cont.)

  • this inside of object methods is that object                         (except call-site changes)

 

 

 

  • common object methods
    • Object.keys()
    • Object.values()
    • Object.entries()
const presenter = {
  name: 'Özgün',
  welcomeSpeech: function () {
    console.log(`My name is ${this.name}`);
  },
};

Explicit call-sites

  • apply({}, [...]) -> object, array of arguments
  • call({}, a, b, c) -> object, comma-separated arguments 
  • bind({}, args...)

Constructor

  • convention is PascalCase but not required
  • not different than regular function

Instance

  • created with new keyword
  • can be checked via instanceof 
function Presenter () {
  this.name = name;
  this.welcomeSpeech = function () {
    console.log(`My name is ${this.name}`);
  };
}
const jsPresenter = new Presenter('Özgün');

jsPresenter instanceof Presenter

Prototypal Inheritance

  • behaviour delegation
  • inherits its prototype's properties
  • related methods & properties:
    • Object.prototype.hasOwnProperty()
    • Object.prototype.isPrototypeOf()
    • Object.getPrototypeOf()
    • Object.prototype.constructor
function Stream (name) {
  this.name = name;
}

Stream.prototype.hasPublicAccess = true;
Stream.prototype.play = function () {
  console.log(`${this.name} has${this.hasPublicAccess ? ' ' : ' not '}public access...`)
};

const youtube = new Stream('Youtube');
youtube.play(); // Youtube has public access...
youtube.hasPublicAccess; // true

Sub-classes & "class"

  • make prototype connection with Object.create()
  • __proto__
  • class is only syntactic sugar 
function ITGuy(name) {
  this.name = name;
  this.department = "IT";
}

function Developer(name) {
  ITGuy.call(this, name);
  this.unit = "Software Development";
}

Developer.prototype = Object.create(ITGuy.prototype);
Developer.prototype.constructor = Developer;
class ITGuy {
  constructor(name) {
    this.name = name;
    this.department = "IT";
  }
}

class Developer extends ITGuy {
  constructor(name) { 
    super(name);
    this.unit = "Software Development";
  }
}

Design Patterns

  • Constructor
  • Module / Revealing Module
  • Factory
  • Mixins

constructor pattern

function Furniture (type, color) {
  this.type = type;
  this.color = color;

  this.paint = function (anotherColor) {
    this.color = anotherColor;
  }
}
function WhiteGoods (type, color) {
  this.type = type;
  this.color = color;
}

WhiteGoods.prototype.paint = function (anotherColor) {
  this.color = anotherColor;
};

module/revealing module pattern

  • encapsulates private data
  • returns object
  • can be used as IIFE
const multiplier = (mult = 2) => {
  let count = 1;

  return () => {
    count *= mult;
    return count;
  }
}

Factory pattern

  • creates different types of instances 
  • easily extendable
  • might bring more complexity
const StuffFactory = {
  Stuff : function (stuffType) {
    return Object.create(this.stuffs[stuffType]);
  },
  stuffs: {
    whitegood: {
      color: 'white',
      electricity: true,
    },
    furniture: {
      electricity: false,
    },
  },
}

Mixins

  • reusable extender in simple
  • similar to React.js hooks
function extend (obj, mixin) {
  return Object.assign(obj, mixin);
}

myMixins = {
  paint: function (newColor) {
    this.color = newColor;
  },
}

function Furniture(type, color) {
  this.type = type;
  this.color = color;
}

function WhiteGoods(type, color) {
  this.type = type;
  this.color = color;
}

extend(Furniture.prototype, myMixins)
extend(WhiteGoods.prototype, myMixins);

References

  • Kyle Simpson - You Don't Know Javascript
  • Udacity - Intermediate Javascript Nanodegree
  • MDN
  • Dan Abramov & Maggie Appleton - Just Javascript
  • Marijn Haverbeke - Eloquent Javascript
  • Addy Osmani - Learning JavaScript Design Patterns

Any questions?

Thank you for listening

Object Oriented Javascript

By Özgün Bal

Object Oriented Javascript

  • 63

More from Özgün Bal