{Object: Title}

Danny Padron
3 min readAug 11, 2020

--

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.

--

--

Danny Padron
Danny Padron

Written by Danny Padron

Full stack web developer with experience in Ruby on Rails, JavaScript, React and Redux and learning more!

No responses yet