First, let’s see what a constructor is: A constructor or a “constructor function” is simply a function, which is called with
new keyword! simple as that 😄
So what? Why does this feature even exist? The answer is:
Calling a function with the
Yes, this is the way that an object is created, but only an object of type Object!
The code above is a short-hand for this:
String, Number, Boolean, Object (also: Array, Function, …), …
const myArray = [1, 2]; is a shorthand for writing
const myArray = new Array(1, 2);.
Note: Do not use these constructors to create variables, Especially
Function because it has security and performance issues.
const myStr = "Hello"; isn’t a shorthand for
const myStr = new String("Hello");. As you remember, the result of a constructor function call is always an object. So why do these constructors exist for primitives?
const myStr = "Hello!";
console.log(myStr.toUpperCase()); // HELLO!
The code above is a pseudo-code depicting what happens behind the scenes when we treat a primitive like an object.
How is a constructor different from a function?
Constructors are functions. the only difference is that when we call a function with the
this to the function.
Note: It’s a good practice to name constructors as PascalCase in order to visually distinguish them from regular functions.
As you can see, the variable
this inside our constructor is exactly the same as the
person variable. If two objects are equal, it means that they are pointing to the exact same location in memory, and mutating each one of them affects the other. So, adding properties to
PersonConstructor is exactly like adding the same properties to
Note: If a constructor function doesn’t return an object, it will implicitly return
this (like our example which it is returning nothing, i.e.
prototype. It is useful only when the function is called as a constructor, because when the
new keyword creates the empty object, it adds an internal
[[Prototype]] property to it that points to the constructor’s
prototype object only consists of one property called
constructor that points to the constructor function itself.
person.__proto__.constructor === PersonConstructor; // true
Note: Writing a property name in double brackets means that it’s an internal property of that object and they are not available for the developers. To access this particular property on an object, we can use
Object.getPrototypeOf(obj) method. Although it’s not standard, most browsers allow the developers to access it as a property named
__proto__. From now on we will call it
__proto__ for convenience.
__proto__ property anyway?
__proto__ will be checked. Again, remember this important relationship between
__proto__property points to the “
prototype"property on the constructor of that object.
prototype property of that object. But what if it is not there too? Remember,
PersonConstructor.prototype is just another object! so if a property/method is missing in there, the above diagram is performed this time on
When we create a function, its
prototype property is created by the built-in
Object constructor (i.e. plain object). So what do you expect the result of the following expression would be?
null and therefore returns
To test the above diagrams, we can write this code:
Note: This is an example to prove how the prototype chain works. Modifying
In the code above,
sayHi doesn’t exist on
person object. So let’s look at the
prototype property of its constructor.
sayHi also doesn’t exist on
PersonConstructor.prototype. So let’s check the constructor of
PersonConstructor.prototype which is
Object. Yes, it exists in
- Constructors are functions, called with
newkeyword, creates an empty plain object and passes it to the constructor function as a variable called
- If the constructor function doesn’t return an object,
thiswill be returned implicitly.
- The “regular” or “plain” object is created by the built-in
- objects are aware of their constructor through a property called
__proto__on each object, points to its constructor’s
constructorwhich points to the constructor function itself.
prototypeproperty is just another object, it means that it has a
__proto__property too. So for a regular function, the constructor of its
__proto__of the object (which is the
prototypeproperty of its constructor) and if it doesn’t also exist there, the same lookup is done for the
prototypeobject recursively until it either finds it or reaches
undefined. This is called the “Prototype Chain”.
- Since the property
__proto__on all instances of the constructor functions point to its
prototypeproperty on the constructor function is immediately available on all instances.