What we will discuss
- What is the new keyword in constructor instantiation
- What happens if we don't use the new keyword during constructor instantiation
- How to resolve the issue caused when we miss the new keyword
- More on Es5 constructor pattern
1. What is the new keyword in constructor instantiation
The new keyword in JavaScript is used to create an instance of a constructor. In other words, a new keyword helps us to create a fresh variant of a constructor(either built-in constructors or custom defined constructors by we JavaScript developers).
Code example
const emmanuel = new Person({name:"Emmanuel"});
2. What happens if we don't use the new keyword during constructor instantiation
Before answering the second question, i will like to breakdown in simple steps what the new keyword causes JavaScript to do to its constructor behind the hood:
- A dunder/dondo
(__proto__)
object gets created - The dunder
(__proto__)
object will inherit the content of the constructor prototype - And finally, the
this
global object of the constructor will now inherit from the dunder(__proto__)
object
Code example
function Linkedin() {
if (!new.target) return new arguments.callee();
/***********************************
* When you instantiate this constructor
* with the new keyword, the below steps
* gets executed like a magic 🪄:
*
* STEP 1: a dunder object is created:
* const __proto__ = {}
*
* STEP 2: the dunder object inherits
* from constructor prototype
* Object.assign(__proto__,
* Object.create(Linkedin.prototype))
*
* STEP 3: the "this" object inherits from the dunder object
* Object.assign(this,__proto__)
*
* Sumary of what happens behind the hood, i will use Es6
* for this summary so you understand better:
*
* const __proto__={
* ...Component.prototype
* } /*Hey, do you know i am the new object which
* can only be accessible by my Constructor instance
* e.g new Func().__proto__*/
*
* (function transferDunderToThis(){
* for(const prop in __proto__){
* this[prop] =__proto__[prop]
* }
* })()
****************************************/
//private variables in es5
const features = ['CAN_POST', 'CAN_CHAT'];
//public methods in es5
Linkedin.prototype.getFeatures = function getFeatures() {
return features;
};
}
const linkedin = Linkedin();
console.log(linkedin.getFeatures());// [ 'CAN_POST', 'CAN_CHAT' ]
Now back to question 2, this is what happens if we don't use the "new" keyword during constructor instantiation
New
__proto__
object is prevented from being createdBecause
__proto__
object is not created, it doesn't get binded or inherits fromComponent.prototype
Because
__proto__
object is not created, thethis
object automatically has nothing related to our constructor to be returned/consumed
3. How to resolve the issue caused when we miss the new
keyword during constructor instantiation
The solution i use personally is to detect if new was used, if not return i then instatiate the constructor using its declaration signature(that is, if its expecting argument a, i will just pass down the argument like a parameter 😄) if need be. Just like below
function Linkedin() {
if (!new.target) return new arguments.callee();// so here is the magic
}
4. More on Es5 constructor pattern
For more on Es5 patterns, checkout my eBook
Top comments (0)