DEV Community 👩‍💻👨‍💻

Cover image for Learning about OOP in JavaScript
Martin Graham
Martin Graham

Posted on

Learning about OOP in JavaScript

In which I make a resolution to blog

I am one class into my LaunchSchool experience, and so far it living up to my expectations. Coming from a 'jack-of-all-trades-one-person-IT-department' at my small school, LaunchSchool seems to be offering some much needed polish to my technical background.

JS-120 - Or How I Learned To Stop Worrying and Love OOP

Consider learning about OOP in JavaScript - definitely some ideas that I'm used to, but also some new twists. Props to LaunchSchool's mastery method - if I had a hazy understanding of object references then prototypes would be straight out.

So for today, a brief summary of the OOP patterns (did I mention I'm an amateur - if you are reading this for information...maybe go elsewhere)

  1. Constructor functions
  2. OLOO - (objects linking other objects)
  3. ES6 classes

Constructor functions

function Car() {
  //code
}

let myCar = new Car();
Enter fullscreen mode Exit fullscreen mode

Things to note:

  • the new keyword is crucial - our constructor function won't actually return anything, but invoking with new causes the creation of a new object (and it is set as the execution context - i.e. this within the constructor), and the implicit return of the new object - also Car.prototype is assigned to the [[Prototype]] property of our new object.

OLOO - Objects Linked to Other Objects

let CarPrototype = {
  init(params){
     return this;
   }

  drive(){
  }
}

let car1 = Object.create(CarPrototype).init(args);
Enter fullscreen mode Exit fullscreen mode

Here we make a prototype object and use Object.create() to set up the prototypal relationship - the conventional init method is used to set initial properties easily. Notice how init returns this - absolutely necessary for method chaining to work.

ES6 classes

class Car {
  constructor(params){

  }

  drive() {

  }
}
let myCar = new Car(args);
Enter fullscreen mode Exit fullscreen mode

Coming from my dabbling in Java and Python, this is the pattern I am naturally drawn to. Note the constructor method - invoked with the use of new, and will be important when subclassing.

Remaining questions I have, in no particular order

  1. Is one pattern generally used?
  2. What are the gotcha's for each method - (for instance, subclassing with constructor functions seems to have some quirks)?

Top comments (0)

Create an Account!

👀 Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.