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.