An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.
If you want to miss nothing click follow and you are welcome to comments and discuss with me.
Without further ado here is a summary of my notes for today.
OOP in JS
In javascript OOP:
- We create objects
- We link them to a prototype object
- Then the objects inherit all the methods of the prototype
How can we create objects and their Prototype?
We have many ways in JS to do that:
- Constructor Functions (see below)
- Classes (ES6)
- Object.create (Will not be covered here)
Constructor
// Constructor by convention have capital case
const Person = function(firstName, birthYear) {
// this keyword will set the property to object instance
this.firstName = firstName
this.birthYear = birthYear
}
// create new object instance (set this keyword and link to prototype)
const person1 = new Person('Mike', 1990)
// Check object type
console.log(person1 instanceof Person) // {firstName: 'Mike', birthYear: 1990}
Prototype
// Define prototype method
Person.prototype.calcAge = function() {
console.log(2021 - this.birthYear)
}
// Now this method is available for all object instance
person1.calcAge()
// We can also add a prototype property
Person.prototype.maxAge = 100
// This property is shared with all of his object instances
console.log(person1.maxAge) // 100
Class
class Person {
constructor(firstName, birthYear) {
this.firstName = firstName
this.birthYear = birthYear
}
calcAge() {
console.log(2021 - this.birthYear)
}
}
const person1 = new Person('Mike', 1990)
Getters, Setters and Static methods
class Post {
constructor(title, body) {
// use _title to avoid name conflict with get and set
// it is also a convention to mark the property as read only
this._title = title
this.body = body
this.tags = ['web', 'dev', 'js']
}
get title() {
return this._title.trim().toUpperCase()
}
set title(value) {
this._title = value
}
// create a static method
// static method do not exist in object instance
static displayHello() {
console.log('hello World')
}
}
// Access get and set like a property
post = new Post('My blog', 'blog body...')
console.log(post.title) // MY BLOG
post.title = 'New title'
console.log(post.title) // NEW TITLE
// call static method
Post.displayHello() // 'Hello World'
Inheritance
class Person {
constructor(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
greeting() {
console.log(`${this.firstName} is a person`)
}
}
// use extends keyword to create inheritance
class Customer extends Person {
constructor(firstName, lastName, creditLimit) {
// super() will call parent constructor
super(firstName, lastName)
this.creditLimit = creditLimit
}
// if a greeting() method exist in parent, it will be override
greeting() {
console.log(`${this.firstName} is a customer`)
}
}
client = new Customer('Mike', 'Taylor', 2500)
client.greeting() // 'Mike is a customer'
Encapsulation (private and protected)
Actually in JS real private and protected do not exist. We use the convention underscore _ to mark the property or method as private/protected
class Person {
constructor(firstName, lastName) {
// mark private/protected by convention
this._firstName = firstName
this._lastName = lastName
}
// If we want to expose a public property, we use a getter and setter
get firstName() {
return this._firstName
}
set firstName(value) {
this._firstName = value
}
greeting() {
console.log(`${this._firstName} is a person`)
}
}
const person1 = new Person('Mike', 'Taylor')
console.log(person1.firstName) // Mike
Top comments (1)
OOP !== classes
In object oriented programming you have states instead of functional programming, so it's important to manage this states. Many dev teams try to minimise the maintaining hell by restrictions e.g. access to this states or communication between the objects, and this is what OOP is.
Good OOP is mostly related to the SOLID principles.