An Interest In:
Web News this Week
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
JS 101: Implementing the "new" keyword
Because there is no real concept of classes in JavaScript, it helps to understand what some of these classical keywords are really doing under the hood.
We're going to create a simplified version of the "new" keyword in JavaScript. For example, using the new keyword to instantiate an object we would do:
const dog = new Dog()
but we are going to do something like this:
const sparky = newObject(Dog, 'Sparky', 3)const spot = newObject(Dog, 'Spot', 6)
What the "new" Keyword Does
To understand the "new" keyword, it's important to understand constructor functions. Constructor functions in JS are just regular ole functions that are responsible for initialization. For example:
// the upper case function name is just a standard practice, not necessarily requiredfunction Dog(petName, age) { this.petName = petName this.age = age}
So here are the steps that the "new" keyword does in the background:
- Create an empty object
- Assign the prototype of the empty object to the prototype of the constructor function
- Run the constructor function using the "this" context of the new object
- If the constructor returns an object, return that, otherwise, return "this"
Let's start off by defining a function called newObject
that will replace the new keyword.
/* We will need the constructor function, and all of the constructor parameters. Using the handy spread operator here.*/function newObject(constructor, ...params) { // we will fill this out in the following steps}
Step 1: Create an empty object
Easy enough. Let's do that:
function newObject(constructor, ...params) { function d() {}}
Step 2: Assign the prototype of the empty object to the prototype of the constructor function
A little trickier, but Object
has a handy function called setPrototypeOf
. Let's use it:
function newObject(constructor, ...params) { function d() {} Object.setPrototypeOf(d, constructor.prototype)}
Not bad so far!
Step 3: Run the constructor function using the "this" context of the new object
Alrighty, this is probably the most complicated part for new JavaScript programmers. There is a function that all objects have called call
and apply
. They run a particular function where the this
parameter of that function is the one we pass. For example:
function Dog(petName) { this.petName = petName}/* we pass "this", so the "this" in "this.petName" refers to the one we passed in. */Dog.call(this, 'Harold')/* if we want to pass an array of parameters, we can use the multi- parameter equivalent of the "call" function.*/Dog.apply(this, ['Harold', 'James', 'Clark'])
Okay, so now that we know how to use call
/ apply
, which one do you think we should use to handle step number 3? Remember, a constructor function can have any number of parameters.
Ready? Here it is:
function newObject(constructor, ...params) { function d() {} Object.setPrototypeOf(d, constructor.prototype)// apply expects an array-like second parameter, which is why// we spread it in an array constructor.apply(d, [...params])}
Step 4: If the constructor returns an object, return that, otherwise, return "this"
To finish off our newObject
function, we add a quick conditional check to see if the constructor function returns an object.
function newObject(constructor, ...params) { function d() {} Object.setPrototypeOf(d, constructor.prototype) const obj = constructor.apply(d, [...params]) if(typeof obj === 'object') return obj return d}
Note that null
is technically an object, so if a constructor returns null, that will be returned by our instantiation function.
Step 5: Profit
Let's put everything together and give our function a whirl!
// our fancy new functionfunction newObject(constructor, ...params) { function d() {} Object.setPrototypeOf(d, constructor.prototype) const obj = constructor.apply(d, [...params]) if(typeof obj === 'object') return obj return d}// an example constructor functionfunction Dog(petName, age) { this.petName = petName this.age = age this.bark = function() { console.log(`${this.petName} is ${this.age} years old`) }}const bill = newObject(Dog, 'Bill', 8)const sam = newObject(Dog, 'Sam', 2)dog.bark() // prints: Bill is 8 years olddog2.bark() // prints: Sam is 2 years old
Conclusion
Now that we have seen how the new keyword works, we can appreciate how handy it is that all we have to do is type const dog = new Dog()
to get the same result.
FUN FACT!
The new
keyword will run the given function regardless of whether you type new Dog()
or new Dog
, so technically you don't need to do the former, but for the sake of everyone's sanity it's probably better to just go with the former option.
Original Link: https://dev.to/krisguzman_dev/js-101-implementing-the-new-keyword-5h1j
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To