Understanding Objects and Prototypes in Javascript

Yasemin çidem
Mar 23 · 5 min read

JavaScript is an object-based language based on prototypes, rather than being class-based. Objects are not inherently class-based but it is often convenient to define class-like abstractions based upon a common pattern of constructor functions, prototype objects and methods. Built-in objects themselves follow such a class-like pattern by making use of the prototype property. In this article, we will look into built-in objects and prototypes.

Built-in Objects:

There are couple of built-in objects exist in javascript that extend the flexibility of the language. Many built-in objects are functions: they can be invoked with arguments. Some of them furthermore are constructors: they are functions intended for use with the new operator.

  • String
  • Number
  • Boolean
  • Object
  • Function
  • Array
  • Date
  • RegExp
  • Error

Built-in objects are “function”?

  • If that built-in object has a [[Call]] internal property, built-in object is a "Function" .
  • If that built-in object has a [[Constructor]] internal property, built-in object is a "Constructor Function" .
  • If that built-in object does not have a [[Call]] internal property, built-in object is a "Object" .

All above listed built-in objects are functions and constructor. They can be invoked with arguments or invoked by using new keyword.

What Built-in Object looks like ?

Let’s consider String Object.

  1. String():
    It performs a type conversion.
  2. String.constructor:
    When String is called as part of a new expression, it is a constructor: it initialises the newly created object.
  3. String.prototype:
    The initial value of String.prototype is the standard built-in String prototype object.
  4. newly created String object:
    The newly created String object is itself a String object whose value is an empty String.The value of the [[Prototype]] internal property of the String prototype object is the standard built-in Object prototype object.

String Object:

Array Object:

Function Object:

As above examples all built-in objects are connected to each other with prototype objects.

Prototype:

Each built-in function(Object, Function, Array so on) provides an anonymous object that can be referenced via the prototype property of the built-in function. The Object.prototype object has many methods and properties such as toString() and valueOf() . Addition to them, it also contains constructor that references the Object built-in function.
Let’s suppose that a circle represents a function and a square represents an object. The following figure illustrates the relationships between the Object() function and the Object.prototype object:

Object.prototype.constructor = Object

Define new Function called Foo:

Let’s define a constructor function called Foo. It will look like same with Object. Because Function and Object are built-in function and they have prototype object.

function Foo(name) {
this.name = name;
}

In addition, JavaScript links the Foo.prototype object to the Object.prototype object via [[Prototype]], which is known as a prototype chain.

Foo.prototype.__proto__ === Object.prototype // true

Define a method in prototype object and create a new instance from Foo():

Foo.prototype.getName = function() {
return this.name;
}
// create an instance of Foo constructor function
let foo1 = new Foo(‘John’);

New instance is connected to the prototype object of Foo constructor function through __proto__ is pronounced as dunder proto.

foo1.__proto__ === Foo.prototype // true

If we want to get access the getName method through the newly created object foo1. It will follow these steps.
1. foo1 checks the getName method in itself.
2. If it does not exist in foo1 object, it will ask for Foo.prototype.
3.
If it does not exist in Foo.prototype object, it will ask for Foo.prototype.__proto__(Object.prototype)

Let’s create an another object and defined a method to this object.

var foo2= new Foo('');
foo2.getMessage = function () {
return “Hello!”;
};
foo2.getMessage(); // “Hello!”
foo1.getMessage(); // getMessage is not defined

foo1 and foo2 will follow the same prototype chain as described in above schema. getMessage method is specified only for foo2. Because of that foo2.getMessage will return a result. When the foo1.getMessage method runs, the error will be thrown because foo1 will go through all prototype chain and it will not find any getMessage method.

Illustrate String Built-in Object:

We have already mentioned that many built-in objects are function such as Function, Object, String, Array so on. We have already seen built-in Function object by creating Foo function. Rest of the built-in objects work in the same way. In order to understand deeply we can give an example of how String built-in object works.

String.prototype.getMessage = function() {
return "Hello";
}
let str = new String();
str.getMessage() // 'Hello';

We have already gone through Object, Function and String built-in objects. The rest of the built-in objects( Number,Date, RegExp, Error, Boolean) that we haven’t covered yet works in the same way as well.

Hopefully these examples will help you understand how to prototypes work in js along with built-in objects. Every built-in objects themselves follow such a class-like pattern. This class-like pattern is presented through the prototype object.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Yasemin çidem

Written by

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.