{Object: Title}
Object Oriented Programming needs an Object, and creating an object in JavaScript is as easy as just adding the properties of that object inside curly braces {}
. The types of properties you can put into this object are arrays, strings, numbers or booleans. Once the object has been created it now gives you access to be able to get the properties form that object using dot notation.
To create these new Objects they need to have an Object constructor. The Object constructor is the same as a regular function, it’s what is called every time a new Object is created. Whenever a function is invoked with the new
keyword before it, the function then becomes a constructor function and creates a new instance. With new
invoking the function we now introduce this
to the function. this
will refer to the individual instance that is being created. So for example :
function Person(firstName, lastName) {
this.first_name = firstName
this.last_name = lastName this.sayName = function() {
console.log(`Hi, my name is ${this.first_name} ${this.last_name}`)
}
}let firstPerson = new Person('John', 'Smith')
firstPerson.sayName() // 'Hi, my name is John Smith'
let secondPerson = new Person('Bob', 'Ross')
secondPerson.sayName() // 'Hi, my name is Bob Ross'
When secondPerson
is created with new Person('Bob', 'Ross')
, this
in the Person
function refers to the newly created instance that is being passed through the method when new Person('Bob', 'Ross')
is being called.
Classes are special functions but they are not objects, a class is more of a design for an object. Class syntax is a nice way to use OOP
class Person {
constructor(firstName, lastName) {
this.first_name = firstName
this.last_name = lastName
}
sayHi() {
console.log(`Hi, my name is ${this.first_name} ${this.last_name}`)
}
}
A positive to using OOP in this way is that JavaScript inheritance allows us to create a new class all together using the current class, the new class would inherit all the properties of the parent class. JavaScript inheritance is achieved by using the prototype. This is called Behavior Delegation Pattern or prototypal inheritance. It links objects to other objects, so for each instance of Person
that we create we are really recreating the memory for the properties and methods of that base Person
class. These properties and methods will be shared for all instances made. JavaScript doesn’t really technically ‘inherit’ anything it comes back to linking objects to other objects. The way JavaScript achieves this is that for each function that is called with new
it will assign an internal [[prototype]]
that will point to the original function. Because of this it can delegate its properties and methods to other objects who can have access to them as well. So secondPerson
has an internal prototype
that links it to the the Person
function which allows secondPerson
to have access to the sayHi
function. So for example
Let’s say that the sayHi
function was defined inside Object
instead of inside Person
. Because of this prototype link if I call secondPerson.sayHi()
it will use the link to Person
and check to see if it contains a function sayHi
if it does not then it will look at the prototype link that Person
has to Object
and see if Object
contains the function sayHi
. Because of that prototype link secondPerson
has access to the functions inside Object
. The properties and methods aren’t copied into each object but instead work by using the prototype
to check the direct prototype link if not then it will check the next link. In short, prototype
is a property that contains a link to an object where you defined your methods and properties in that object and that you want to have ‘inherit’ to your other object.