← All Posts

Object oriented JavaScript - rough concepts

These are some rough notes I’d scribbled for myself. Don’t expect anyone to understand it completely…

oojs-card

Objects basics -

  • Are a collection of something
  • A simple way of creating them → var myobj={}
  • Can add values to it by → myobj.foo="value"
  • Objects aren’t classed based, so there is no blueprint
  • No data restrictions
  • basically key-value pairs

Creating Objects

  • when you have things that have to be repeated, create a function, and use it multiple times
  • these functions can accept data as parameters
function createemployee(fn,ln,age){
var newemployee={}
newemployee.fn=fn;
newemployee.ln=ln;
newemployee.age=age;
return newemployee;
}

createemployee(Michael,Scott,45)

Constructors in JS

  • So we can create multiple objects using the above fcn, but there is a shortcut provided by javascript for this called constructors
  • these constructor fcns let us populate them with given parameters
  • the common thing in the above fcn is - creating an object (createemployee) and returns the obj
  • so we can skip these lines , by telling it it’s a constructor.
  • new keyword helps us create a new object , and return it …
  • and the object that is created , can be accessed/(called as) by using this keyword
function createemployee(fn,ln,age){

this.fn=fn;
this.ln=ln;
this.age=age;

}

var employee3=new createemployee(Michael,Scott,45)

Difference between regular functions and constructors

  • this
  • when you want to call a constructor fcn , you have to use the new keyword- because what js does is that it adds 2 more lines i.e creates this object and return that this obj
  • we can not use the new keyword , but the function won’t return anything
  • So, basically,the constructor function is no different -it can be called in regular mode (which wont return it) . but to help indicate (to other developers) that its meant to be called as constructor functions - is to use the first letter as capital letter.
  • ⚠️ var bicycle3=new Bicycle(40,3,22); looks a lot like how classes are made in other programming langs, but it’s not a class! it’s just a fcn

Switching function types and calls

  • what we switch the above … i.e use new keyword for the normal funcn and call the constructor fucnc without the new.
  • calling a regular fcn in constructor mode, using new , still works !
  • when we call constructor, without the new keyword. the this refers to the GLOBAL object, instead of obj in the constructor. It doesn’t work! no, it returns undefined

Function Execution Types (understanding this )

  • calling it globally;
  • calling it as a method of another object
  • calling it as a constructor, using new
  • 4th one is discussed further below…

oojs1

The this argument values

  • there are 2 default arguments to every function call - arguments and this.
  • the above code’s method no 1- when it executes - this refers to the global object
  • when executing a method no 2- method of an obj , this refers to the obj
  • method 3 - using new for calling - will return an empty object

Working on objects with this reference

to create a method, with this .- add

oojs2

there is one top-level fcn , and other smaller fcn . this reference of these 2 are different

Using the call function

  • if the above “inflatetire” has to be shared to another “Mechanic()” construcor
function Mechanic(name){
this.name=name;
}
var mike=new Mechanic("Mike")
mike.inflateTires=bicycle1.inflateTires;

the this reference changes ! and refers to the mike instance , and it will refer undefined , as mike doesnt have tirepressure property .

  • What if we say - hey javascript , here i dont want to refer to this , but refer to an another object of our choice that we send
  • this can be done by the #4th method of function calling (which was mysterious earlier) called as call
function foo(){}
foo.call() //this is the same as calling foo()

but what call() can do , is , it can take in an object - it takes this object and binds it to the this refernce

major example (play with this in console)

function Employee(fname,lname,age){
  this.fname=fname;
  this.lname=lname;
    this.age=age;
      this.greet=function(){
        console.log(`hello there ${this.fname}`)
      }
}

emp1=new Employee("Michael","Scott",37)
emp2=new Employee("Jim","Halpert",22)

function Receptionist(fname){
  this.fname=fname
}

recp1=new Receptionist("Pam")
recp1.greet=emp1.greet;
recp1.greet.call(emp2)

Prototypes

  • helps u crate objects using blueprints/template (not similar to classes , because we don’t create instances of it)
  • when we create objects from constructor , we also create copies of the methods/funtions in it- but this can cause to create huge amounts of copies .. in case of huge “new” objects
  • what class-based approach, is that class has a method , and the method is shared among the resulting objects (btw this not for javascript)
  • there is a new class keyword in ES6 that simulates class like behaviour , but js does not have class concept

Introducing the prototype

  • when a function is written/declared/created , 2 copy objects of it are made . one object is in the global execution context . and other is the object for the Prototypes
  • we can access the first object easily , but what about the prototype objct ? we can access it by typing objectname.prototype
  • when a new obj is created by using new keyword , it’s pointed to the prototype

oojs3

Property lookup with prototypes

oojs4

  • new of the function will have the same label , as the prototype
  • if we ask object for some property that it doesn’t have BUT its prototype has it, then it will return that property

Object behaviors using prototypes

  • every object that is created using newkeyword will have the prototype data
  • run this - using prototype , we don’t need to create multiple copies of playPrank function
function Employee(fname,lname){
  this.fname=fname;
  this.lname=lname;

}

let emp1=new Employee("Jim","Halpert")
let emp2=new Employee("Pam","Beesly")
Employee.prototype.playPrank=function(){console.log("Prank played by "+this.fname)}

emp2.playPrank()

Object Function

  • in js just like we have global window object , we also have a global function -called “Object”
  • main takeway- the existence of this “Object” - which has a prototype property

oojs5

inheritance

Two constructors can be created, and they can share their specific properties with their own objects …

but what if we want them to share some properties ?.. we can add that property to the Object … but then, every function will have access to the code.

What we can do is, change the proto path to the other constructor’s prototype

oojs6