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?
- Creates a new Object
- Creates and binds a new to that object
- It sets this new object's prototype property to be the constructor function's prototype object
- It executes the constructor function
- 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
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,296