Javascript Object, Prototype and Inheritance

Most of the things we create in javascript is an object including arrays, functions. Even the primitives(string, number, null, undefined, boolean) which exists have wrapper around them, thats the reason we can call functions on strings/numbers(‘javascript’.toUpperCase()).

So how exactly do we create an object. If your from a background of Object oriented languages like java, ruby first thing that flashes your mind is to create a class and instantiate it. But the rules are different here, there is no class method in JS core. The new ES6 class is syntactic sugar on the constructor function.

Lets start creating a Object. There are 3 ways to creating a object. Below are they types with example.

1. Using JS object literal.

let bookLiteral = {name: ‘Good parts of JS’, price: 300, sellingPrice: function(tax) {return this.price + tax}}
bookLiteral.sellingPrice(30)
=> 330

So we directly have a book object here with 3 properties. Name and Price holds a primitive and selling Price has a function as value. The sellingPrice function gives the expected output of 330. This type of creating a function is lot easier when you have a single object to create.

2. Using new Object()

let bookNew = new Object()
bookNew.name = ‘Good parts of JS’
bookNew.price = 300
bookNew.sellingPrice = bookLiteral.sellingPrice
let someMethod = ‘sellingPrice’
bookNew[someMethod](30)
=> 330

This type of creation is same as above, but if you noticed the invocation of the sellingPrice is different here, it just another way used when invoking with a variable. Also the sellingPrice is borrowed from bookLiteral object instead of typing it again. Yes bookLiteral.sellingPrice is similar to typing(deepcopy) it and is not referencing bookLiteral object.

3. Using constructor function.
Above two methods directly create object, but if you need to create multiple object using a blueprint then this is the type you should use. This is kind of similar to defining a class and instantiating it.

function BookProto(name, price) {
this.name = name;
this.price = price;
this.sellingPrice = function(tax) { return this.price + tax }
}

So this just creates a constructor for the object and its not a object yet. To create a object it is similar to type 2. But instead of new Object we need to use new BookProto.

let bookCustom = new BookProto(‘Good parts of JS’, 300)
bookCustom.sellingPrice(30)
=> 330
let bookCustomTwo = new BookProto(‘Function Js’, 500)
bookCustomTwo.sellingPrice(50)
=> 550

So you can see how similar it is to create a new instance of BookProto with other OO languages.

Adding new Properties

We leant how to create new objects, lets see how to add new properties to objects.

bookLiteral.author = ‘John’
bookLiteral.discountPrice = function(percent) { return this.sellingPrice(10) * (1-(percent/100)) }
bookLiteral.discountPrice(10)
=> 279

So above adds a new property discountPrice. This gets added to only the bookLiteral object. For bookNew and bookCustom it is similar to bookLiteral object.

But the above syntax wont work on BookProto. To add a new method to constructor function we need to use the prototype property.

BookProto.prototype.discountPrice = function(percent) { return this.sellingPrice(10) * (1-(percent/100)) }
bookCustom.discountPrice(10)
=> 279
bookCustomTwo.discountPrice(10)
=> 459

So here we are adding the discountPrice property. But if you observed the other two calls on bookCustom and bookCustomTwo, the discountPrice is automatically available even though they were defined prior to adding the discountPrice method.

Prototype Inheritance
Before we talk about prototype inheritance let see how a call method works.
Lets declare a new object without sellingPrice and see how we can use the selling price in existing object.

let book = {name: ‘Good parts of JS’, price: 300 }
bookLiteral.sellingPrice.call(book, 10)
=> 310

So this calls the sellingPrice with the book object reference and passing 10 as arg.
Now lets create a new constructor function called TextBook. But we don’t want to add the same old methods of book. Textbook is also a book so lets see how to inherit the properties.

function TextBook(type, name, price) {
BookProto.call(this, name, price)
this.type = type
}
new TextBook(‘CS’, ‘ff’, 100).sellingPrice(99)
=> 199
new TextBook(‘CS’, ‘ff’, 100).discountPrice(99)
=> error
TextBook.prototype = Object.create(BookProto.prototype)
new TextBook(‘CS’, ‘ff’, 100).discountPrice(99)
=>1.100000000000001

So here we can see the call method is invoked on BookProto. The first argument is this and remaining two are the BookProto constructor argument. this here means the instance which is created from TextBook. this in general is the object which is controlling the current execution flow.

But if you try to access the discountPrice it throws en error. The call method just creates the properties in the BookProto to TextBook. The .prototype is the one which actually copies the whole prototype. You can confirm this in the __proto__ in console. __proto__ is present on an object and prototype is on a constructor function. You can also directly inherit from an instance using

inheriting_instance.__proto__ = existing_instance
let testBook = {price: 100}
testBook.__proto__ = bookLiteral
testBook.sellingPrice(10)
=> 110

There are more things to read on the bind, __proto__, prototype which are not in depth discussed. Try out the examples provided in console. https://github.com/shivhg/Js_Object find the code here.