Frontend Development: JavaScript
🚀 ReDI Fall 2020 🚀
Lecture 8
Introduction to Object Oriented Programming
What we will do today
- FCC QA
- Homework QA
- Objects
- Closures
- Prototypes
- Prototyping Example
FCC & HW
Open to questions
What is "Object Oriented Programming"?
- Programming with classes and objects
- Class: Definition of data format and available procedures
- Object: Instance of a class
- Objects often correspond to real world things
An example
- Class "Cat"
- has 4 legs
- can meow
- sleeps a lot
-
One instance of this class:
Brief History about Javascript
Data types
-
Primitive types
- undefined
- boolean
- number
- string
- bigint
- symbol
-
Structural types
Our focus for today: Objects
(and Functions)
Summary: Constructors
"Construct" a new object and return it.
function Car(brand, horsePower) {
this.brand = brand;
this.horsePower = horsePower;
}
let myCar = new Car('Volkswagen', 100);
Summary: Prototypes
- By default, all objects have the type "Object".
- If an object was created by a constructor, its type is the constructor's prototype.
- Prototypes define the capabilities of an object, but not their contents.
- All prototypes inherit from "Object.prototype".
(Exception: primitive datatypes, such as string and number)
Summary: Prototypes
The prototype of a class is an instance of its parent class.
function Vehicle(wheels) { this.wheels = wheels; }
function Car() { Vehicle.call(this, 4); }
Car.prototype = Object.create(Vehicle.prototype);
// Car.prototype is a Vehicle instance.
function Boat() { Vehicle.call(this, 0); }
Boat.prototype = Object.create(Vehicle.prototype);
// Boat.prototype is a Vehicle instance.
