An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
The Complete Rules to `new` (Object Oriented Programming: The Core)
Hi, today I will continue to explain about the Rules of new
.
The 'new' keyword is a central part of object-oriented programming in JavaScript. This blog will discuss how it turns a normal function into a constructor. We'll cover all of the logic that the engine inserts into our function calls when we use 'new' and how it helps us write powerful code.
Javascripts new Keyword Explained as Simply as Possible
Normal Function Call
To explain what new
does, lets start with just a normal function, called without new
. We want to write a function that will create person
objects. Itll give these objects name
and age
properties based on parameters that it takes in.
function personFn(name, age) { const personObj = {}; personObj.name = name; personObj.age = age; return personObj;}const alex = personFn('Alex', 30);console.log(alex); // -> { name: 'Alex', age: 30 }
Simple enough. We create an object, add the properties to it, and return it at the end.
new
Lets create a function that does the same thing, but we want it to be invoked using new
. This function will create the same object as the one above. Common practice is to make functions that are meant to be invoked with new
start with a capital letter. These functions are also referred to as constructors.
function PersonConstructor(name, age) { this.name = name; this.age = age;}const christa = new PersonConstructor('Christa', 30);console.log(christa); // -> { name: 'Christa', age: 30 }
Invoking personFn
normally and invoking PersonConstructor
with new
both result in the same object being created. Whats going on?
The new
keyword invokes a function in a special way. It adds some implicit code that we dont see. Lets expand the above function to show everything thats happening. Below, the commented lines are pseudo-code representing functionality that is implicitly added by the JS engine when using new.
NOTE: The following code and explanation make references to prototypes and the __proto__
property. At this point, you probably arent familiar with them. Dont worry about it. Well cover them in a future blog.
function PersonConstructor(name, age) { // this = {}; // this.__proto__ = PersonConstructor.prototype; // if (there is a return statement // in the function body that // returns anything EXCEPT an // object, array, or function) { // return 'this' (the newly // constructed object) // instead of that item at // the return statement; // } this.name = name; this.age = age; // return this;}
Lets break it down. new
:
Creates a new object and binds it to the
this
keyword.Sets the objects internal prototype-inheritance property,
__proto__
, to be theprototype
of the constructing function. This also makes it so the constructor of the new object is prototypically inherited.Sets up logic such that if a variable of any type other than object, array, or function is returned in the function body, return
this
, the newly constructed object, instead of what the function says to return.At the end of the function, returns
this
if there is no return statement in the function body.
Lets show that these statements are valid, one by one.
function Demo() { console.log(this); this.value = 5; return 10;}/*1*/ const demo = new Demo(); // -> Demo {}/*2*/ console.log(demo.__proto__ === Demo.prototype); // -> true/*3*/ console.log(demo); // -> Demo { value: 5 }function SecondDemo() { this.val = '2nd demo';}/*4*/ console.log(new SecondDemo()); // -> SecondDemo { val: '2nd demo' }
new
and OOP
We can see how new
ties in with OOP. It makes it so that our function automatically constructs a new object for us (hence the term constructor) and also returns it at the end. It frees us from creating and returning the object ourselves and allows us to focus on adding the properties we want on the object.
When we see new
being used, we should automatically see that the purpose of the function is to create an object and we should expect that object being returned to us.
Calling a non-constructor with new
What happens if we invoke a normal function like personFn
using new
? Nothing special. The same rules apply. in the case of personFn
, we see nothing explicitly happening.
function personFn(name, age) { const personObj = {}; personObj.name = name; personObj.age = age; return personObj;}const alex = new personFn('Alex', 30);console.log(alex); // -> { name: 'Alex', age: 30 }
Why? Lets add our implicit code in to personFn
.
function personFn(name, age) { // this = {}; // this.constructor = PersonConstructor; // this.__proto__ = PersonConstructor.prototype; // if (there is a return statement // in the function body that // returns anything EXCEPT an // object, array, or function) { // return 'this' (the newly // constructed object) // instead of that item at // the return statement; // } const personObj = {}; personObj.name = name; personObj.age = age; return personObj; // return this;}
The implicit code is still added in:
- It binds
this
to a new object and sets its constructor and prototype. - It adds logic that will return
this
instead of a non-object. - It adds an implicit
return this;
statement at the end.
This doesnt affect our code, since we dont use the this
keyword in our code. We also explicitly return an object, personObj
, so the returning logic and the return this;
line have no use.
Effectively, using new
to invoke our function here has no effect on the output. If we were using this
or if we werent returning an object, the function would have different effects when invoked with and without new
.
We shouldnt try to write code like this block we see directly above. If were using new
, we should use this
in our function and we shouldnt create a new object ourselves. Not following this pattern will make our code more confusing to read and others reading our code may even think its a mistake.
Thats it.
Original Link: https://dev.to/topcode007/the-complete-rules-to-new-50b
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To