Object Oriented JS

  • Write Clean, Organized Code
  • Create Classes
  • Add Methods to Classes
  • Use the new keyword to create instances
  • Keep state on an instance

Objectives

What IS

Object Oriented Programming?

Systems Thinking

Systems Thinking

How to we organize our code?

Systems Thinking

How to we organize our code?

How do we group our application into parts that can be thought of as independent?

Systems Thinking

How to we organize our code?

How do we group our application into parts that can be thought of as independent?

How do we make reusable code, that can be extended into more complex systems?

A collection of functions and properties

Keeping Data Together

// Dog Properties
var firstName = "Fido"
var lastName = "Destroyer of Carpets"

// Dog Functions
function bark() {
    console.log("Bark!")
}

function sayName (firstName, lastName) {
    console.log("This dog's name is" + firstName + " " + lastName);
}

A collection of functions and properties

// Dog Object
var fido = {
    firstName : "Fido",
    lastName  : "Destroyer of Carpets",
    bark      : function() {
        console.log("Bark!")
    },
    ruinCarpet : function (carpet) {
        carpet.status = "ruined";
        carpet.color = "stained";
    }
}

Keeping Data Together

// Dog Object
var fido = {
    firstName : "Fido",
    lastName  : "Destroyer of Carpets",
    bark      : function() {
        console.log("Bark!")
    },
    ruinCarpet : function (carpet) {
        carpet.status = "ruined";
        carpet.color = "stained";
    }
}
// Another Dog
var mimi = {
    firstName : "MiMi",
    lastName  : "SquirrelMenace",
    bark      : function () {
        console.log("Bark!")
    },
    ruinCarpet : function (carpet) {
        carpet.status = "ruined";
        carpet.color = "stained";
    }
}

Keeping Data Together

What happens when we want another dog?

Objects: Create a Class

var ClassName = function(){}

The Constructor Invocation Pattern

//Create a class

var ClassName = function(propertyName, propertyName2){
    // attach arguments as properties to "this", a special variable
    this.propertyName = propertyName;
    this.propertyName2 = propertyName2;
}

Objects: Create a Class

// A class for Dog
var Dog = function(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
}

Objects: Create a Class

//Create a class

var ClassName = function(propertyName, propertyName2){
    // attach arguments as properties to "this", a special variable
    this.propertyName = propertyName;
    this.propertyName2 = propertyName2;
}

ClassName.prototype.methodName = function() {
    console.log(this.propertyName);
}

Objects: Add Methods

// Dog Class
var Dog = function(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
}


// A Bark Method
Dog.prototype.bark = function () {
    console.log("Bark!")
}

Objects: Add Methods

Classes make Instances

//Create an "instance" of the class

var instance = new ClassName("something", "something else");


var anotherInstance = new ClassName("something completely", "different");

instance.methodName();

anotherInstance.methodName();

Classes make Instances

// Dog Class
var Dog = function(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
}

// Bark Method
Dog.prototype.bark = function () {
    console.log("Bark!")
}

Dog.prototype.checkCollar() {
    console.log("This dog's name is " + this.firstName + " " + this.lastname);
}

// Dog Instance

var fifi = new Dog("Fifi", "Destroyer of Carpets");

fifi.bark();

fifi.checkCollar();

Objects: Organizing Code

A collection of functions and variables

// Dog Properties
var firstName = "Fido"
var lastName = "Destroyer of Carpets"

// Dog Functions
function bark() {
    console.log("Bark!")
}

function sayName (firstName, lastName) {
    console.log("This dog's name is" + firstName + " " + lastName);
}

Objects: Organizing Code

Reusable code

var Dog = function(firstName, lastName) {
    // Dog Properties
    this.firstName = firstName
    this.lastName = lastName
}

Dog.prototype.bark = function () {
   console.log("Bark!")
}

Dog.prototype.checkCollar = function () {
   console.log("This dog's name is" + this.firstName + " " + this.lastName);
}

What does the "new" keyword do?

  1. Creates a new Object
  2. Creates and binds a new           to that object
  3. It sets this new object's prototype property to be the constructor function's prototype object
  4. It executes the constructor function
  5. It returns the newly created object
this

Objects: Organizing Code

Reusable code

var fido = new Dog("Fido", "Destroyer of Carpets");
var fifi = new Dog("Fifi", "Destroyer of Carpets");

fido.bark();
fifi.bark();

fido.checkCollar();
fifi.checkCollar();
  • Write Clean, Organized Code
  • Create Classes
  • Add Methods to Classes
  • Use the new keyword to create instances
  • Keep state on an instance

Objectives

Interacting Classes

https://repl.it/BUhG/27

How do we make Reusable Code?

How to we make Reusable Code?

Group related code

How to we make Reusable Code?

Group related code

Assign responsibilities to Objects

How to we make Reusable Code?

Group related code

Assign responsibilities to Objects

Have objects keep track of their own State

How to we make Reusable Code?

Group related code

Assign responsibilities to Objects

Have objects keep track of their own State

Define methods of interaction between objects

How to we make Reusable Code?

Group related code

Assign responsibilities to Objects

Have objects keep track of their own State

Define methods of interaction between objects

Don't let objects depend on the existence of each other!

Intro to OOP with JS

By LizTheDeveloper

Intro to OOP with JS

  • 2,221

More from LizTheDeveloper