Understanding prototype in JavaScript (part 2)

Tram Ho

As usual, you support the original article in my blog here

Welcome back to the JavaScript prototype series. In part 1 we learned about:

  1. How to create a constructor function ?
  2. What is the prototype of the function? and how to add functions to a prototype.
  3. How to use Object.create to share common functions for different objects

If you have not read the first part, you should read it first, before continuing with today’s article!

Here is the example we completed in Part 1. Looking at the Person constructor, we can see that the two most important lines are creating the person object using Object.create and Object.create it. Without creating a person with Object.create , objects created from Person constructor cannot share functions in the prototype, and without the return line, we cannot get the person object we have just created.

Today I will continue with the above example. Perhaps you will wonder why the above need to return the person and when creating a new object does not use the new keyword. Yes, when you call a function with the new keyword, the two lines I commented below are implicitly called (“under the hood”) and the created object is called this .

No errors, right? When we call a constructor function with the keyword new , an this object is created and automatically returned. But if you forget the new keyword when calling the above function, an error will occur, then no this will be created and returned by default. See the example below will clearly:

This pattern is called Pseudoclassical Instantiation .

ES6 Classes

If you are an ES6 believer, then you probably do not need to care about what Prototype is right? ES6 introduces the keyword Class that allows us to create classes and its objects easily and from the headache of complicated prototype prototypes. You can see the details of the Class here .

Clearer and easier to understand, right? So, why do we still have to find out what Prototype is doing, it is time-consuming and doesn’t really work. Because Javascript is prototype based , to understand how the class works, we have to master Prototype. You can read more prototype based here

So we have learned about Prototypes in Javascript , how they work and how to use them. Following are some examples related to Prototype in Javascript.

Get a prototype of an Object

When you want to get an prototype of an object, use the Object.getPrototypeOf function.

By default, the prototype of the object will have a property called constructor points to the constructor function or class (ES6) that created the object. That is also why any object we can access its constructor through instance.constructor .

You can also use the __proto__ property to get a prototype of an object, but this is the old way, currently use the Object.getPrototypeOf (instance) function.

Check if a property is of protype or not

In certain cases, you want to know if an object’s property is the object itself or taken from its protype. The problem is to log all the keys and values ​​contained in an object, see the example below to understand better, simply use for in to loop through all the keys in the object:

And I expect the result to be:

But life is not like a dream, trembling results:

Why is that? Because loop for in will loop through all the properties in the object itself and even the properties in its prototype. So, not only do we see the value of name and mana , but there are also functions of prototype eat , sleep and play . To solve this problem, can use the hasOwnProperty function to check if a property is its own object or not?

The result is now exactly what we expected:

You can further test to verify:

Check the object is an instance of any Class?

Sometimes you want to know whether Little Ti is your child or not? Or is it the product of a neighbor? You have to ask the doctor to check the DNA, and the doctor gives you an instanceof function and its formula as follows:

You’re a pro coder, and so check it out:

Luckily, I am your child, but you want to be sure, you need to know how the instanceof formula works? Yes, it will check whether the object’s prototype is the prototype of the constructor function or the class? Object.getPrototypeOf(ti) === Person.prototype .

Think deeply for a bit

Did you notice the error in the code below?

Fuck, troll daddy? Create an object using the constructor function that dell uses the new keyword. Yes, if you have the answer as above, you completely understand the lesson. But not everyone is as smart as you, especially low IQ and lazy like me.

Maybe you think, being stupid is not related to me ? . But in one day in your team, there was one like that, initializing the object with the constructor function that you created earlier. So, where did the error come from, the mother and daughter crashed and you did not know where the error came from, spent debugging all day, maybe you remembered the problem today.

As mentioned above, if we call a constructor function with the keyword new , an object this will be created by default, and this instance of this is the constructor function:

Instead of firing an error, you can always call the function with the new keyword as well:

Now even if you forgot to call new , the program still works properly.

Arrow Functions

If you’ve learned about the Arrow function in ES6, this is auto-binding, but it doesn’t contain this by itself. Therefore, Arrow functions are not used to make constructor functions, if you try to call an arrow function with the new keyword, it will get an error:

Therefore, an arrow function does not have a prototype .

So we have learned through Prototype in Javascript and some practical applications. Hope you find it useful, like, share to support me. See you in the next posts!

Share the news now

Source : Viblo