When you're writing code using objects heavily, it's k/a object oriented programming.
A Language that has better support for using Objects and classes
Abstraction - abstract away the implementation logic
Encapsulation - hiding/protecting the data (private properties)
Inheritance - access properties of some other object in your object
Polymorphism - a method giving different output in one object and different in another
SOLID Principles:
Difference between OOP in JavaScript and other OOP based languages like Java, C++ etc:
class SomeClass {
constructor(name){
this.name = name
}
method1(){}
method2(){}
}
const someClassObject1 = new SomeClass()
const someClassObject2 = new SomeClass()
const someClassObject3 = new SomeClass()
const protoObj = {
name: "yash",
method1: function(){},
method2: function(){}
}
const myObj = {
__proto__: protoObj
}
What are Prototypes?
Let's say you have an object with a few properties and methods:
const baseStudent = {
college: "College Name",
city: "Bhopal",
getStudentFullName: () => {
return `${this.firstName} ${this.lastName}`
},
getStudentBranch: () => {
return this.branchName
}
}
What are Prototypes?
Now you have a completely different object `student1`
where you want to leverage the properties of the `baseStudent`
object
const baseStudent = {
college: "College Name",
city: "Bhopal",
getStudentFullName: () => {
return `${this.firstName} ${this.lastName}`
},
getStudentBranch: () => {
return this.branchName
}
}
baseStudent.getStudentFullName() //
baseStudent.getStudentBranch()
const student1 = {
firstName: "Yash",
lastName: "Priyam"
}
student1.getStudentFullName() // not a function
student1.getStudentBranch() // not a function
What are Prototypes?
baseStudent
the prototype of student1,
baseStudent
are now inherited by student1
object,const baseStudent = {
college: "College Name",
city: "Bhopal",
getStudentFullName: () => {
return `${this.firstName} ${this.lastName}`
},
getStudentCollegeCity: () => {
return this.city
}
}
// Method 1
const student1 = {
firstName: "Yash",
lastName: "Priyam",
__proto__: baseStudent
}
// Method 2
student1.__proto__ = baseStudent
student1.getStudentFullName() // "Yash Priyam"
student1.getStudentCollegeCity() // "Bhopal"
[[Prototype]]:
__proto__
is just a getter/setter for [[Prototype]], that means it can only get or set the [[Prototype]] property,
__proto__
is not the same as the internal [[Prototype]] property.const baseStudent = {
college: "College Name",
city: "Bhopal",
getStudentFullName: () => {
return `${this.firstName} ${this.lastName}`
},
getStudentCollegeCity: () => {
return this.city
}
}
// Method 1
const student1 = {
firstName: "Yash",
lastName: "Priyam",
__proto__: baseStudent
}
// Method 2
student1.__proto__ = baseStudent
student1.getStudentFullName() // "Yash Priyam"
student1.getStudentCollegeCity() // "Bhopal"
JavaScript is a prototype-based language, meaning every "object" data type has an internal property [[Prototype]].
"prototype":
Array.prototype.myMap = function(){}
Object.prototype
String.prototype
Number.prototype
Map.prototype
/**
the property "prototype" is
available only directly on
the built-in data types
*/
const arr = new Array()
arr.prototype // undefined
Prototype Chain:
const baseObj = {
zero: 0
}
const obj1 = {
one: 1,
__proto__: baseObj
}
const obj2 = {
two: 2,
__proto__: obj1
}
const obj3 = {
three: 3,
__proto__: obj2
}
console.log({obj3})
null prototype object:
const baseObj = {
zero: 0
}
const obj1 = {
one: 1,
__proto__: baseObj
}
const obj2 = {
two: 2,
__proto__: obj1
}
const obj3 = {
three: 3,
__proto__: obj2
}
console.log({obj3})