As usual, you support the original article in my blog here
Welcome back to the JavaScript prototype series. In part 1 we learned about:
- How to create a constructor function ?
- What is the prototype of the function? and how to add functions to a prototype.
- 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.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> person <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">)</span> person <span class="token punctuation">.</span> name <span class="token operator">=</span> name person <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token keyword">return</span> person <span class="token punctuation">}</span> <span class="token keyword">let</span> teo <span class="token operator">=</span> <span class="token function">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tèo'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> |
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
.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// const this = Object.create(Person.prototype)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token comment">// return this</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> teo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tèo'</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">)</span> |
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:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token function">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> ti <span class="token punctuation">)</span> <span class="token comment">// undefined</span> |
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 .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> <span class="token function">eat</span> <span class="token punctuation">(</span> amount <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đang ăn`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> amount <span class="token punctuation">}</span> <span class="token function">sleep</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi ngủ.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> hours <span class="token punctuation">}</span> <span class="token function">play</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi chơi với gái.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">-=</span> hours <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> teo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tèo'</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">)</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">eat</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> amount <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đang ăn`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> amount <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">sleep</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi ngủ.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> hours <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">play</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi chơi với gái.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">-=</span> hours <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> prototype <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">getPrototypeOf</span> <span class="token punctuation">(</span> ti <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> prototype <span class="token punctuation">)</span> <span class="token comment">// {constructor: ƒ, eat: ƒ, sleep: ƒ, play: ƒ}</span> prototype <span class="token operator">===</span> Person <span class="token punctuation">.</span> prototype <span class="token comment">// true</span> |
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
.
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> ti <span class="token punctuation">.</span> constructor <span class="token punctuation">)</span> <span class="token comment">// constructor function</span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">eat</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> amount <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đang ăn`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> amount <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">sleep</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi ngủ.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> hours <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">play</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi chơi với gái.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">-=</span> hours <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> key <span class="token keyword">in</span> ti <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`Key: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> key <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">. Value: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> ti <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
And I expect the result to be:
1 2 3 | Key <span class="token punctuation">:</span> name <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token constant">T</span> í Key <span class="token punctuation">:</span> mana <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token number">7</span> |
But life is not like a dream, trembling results:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Key <span class="token punctuation">:</span> name <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token constant">T</span> í Key <span class="token punctuation">:</span> mana <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token number">7</span> Key <span class="token punctuation">:</span> eat <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> amount <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đang ăn`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> amount <span class="token punctuation">}</span> Key <span class="token punctuation">:</span> sleep <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi ngủ.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> hours <span class="token punctuation">}</span> Key <span class="token punctuation">:</span> play <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi chơi với gái.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">-=</span> hours <span class="token punctuation">}</span> |
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?
1 2 3 4 5 6 7 8 9 10 | <span class="token operator">...</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> key <span class="token keyword">in</span> ti <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> ti <span class="token punctuation">.</span> <span class="token function">hasOwnProperty</span> <span class="token punctuation">(</span> key <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`Key: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> key <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">. Value: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> ti <span class="token punctuation">[</span> key <span class="token punctuation">]</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
The result is now exactly what we expected:
1 2 3 | Key <span class="token punctuation">:</span> name <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token constant">T</span> í Key <span class="token punctuation">:</span> mana <span class="token punctuation">.</span> Value <span class="token punctuation">:</span> <span class="token number">7</span> |
You can further test to verify:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">eat</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> amount <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đang ăn`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> amount <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">sleep</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi ngủ.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">+=</span> hours <span class="token punctuation">}</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">play</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> hours <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> đi chơi với gái.`</span></span> <span class="token punctuation">)</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">-=</span> hours <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> ti <span class="token punctuation">.</span> <span class="token function">hasOwnProperty</span> <span class="token punctuation">(</span> <span class="token string">'name'</span> <span class="token punctuation">)</span> <span class="token comment">// true</span> ti <span class="token punctuation">.</span> <span class="token function">hasOwnProperty</span> <span class="token punctuation">(</span> <span class="token string">'mana'</span> <span class="token punctuation">)</span> <span class="token comment">// true</span> ti <span class="token punctuation">.</span> <span class="token function">hasOwnProperty</span> <span class="token punctuation">(</span> <span class="token string">'eat'</span> <span class="token punctuation">)</span> <span class="token comment">// false</span> ti <span class="token punctuation">.</span> <span class="token function">hasOwnProperty</span> <span class="token punctuation">(</span> <span class="token string">'sleep'</span> <span class="token punctuation">)</span> <span class="token comment">// false</span> ti <span class="token punctuation">.</span> <span class="token function">hasOwnProperty</span> <span class="token punctuation">(</span> <span class="token string">'play'</span> <span class="token punctuation">)</span> <span class="token comment">// false</span> |
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:
1 2 | object <span class="token keyword">instanceof</span> <span class="token class-name">Class</span> |
You’re a pro coder, and so check it out:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">User</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> ti <span class="token keyword">instanceof</span> <span class="token class-name">Person</span> <span class="token comment">// true</span> ti <span class="token keyword">instanceof</span> <span class="token class-name">User</span> <span class="token comment">// false</span> |
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?
1 2 3 4 5 6 7 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token function">Person</span> <span class="token punctuation">(</span> <span class="token string">'Tí'</span> <span class="token punctuation">,</span> <span class="token number">7</span> <span class="token punctuation">)</span> |
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:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">Person</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">warn</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> quên gọi Person với từ khóa new rồi`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> |
Instead of firing an error, you can always call the function with the new keyword as well:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">Person</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> mana <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">this</span> <span class="token punctuation">.</span> mana <span class="token operator">=</span> mana <span class="token punctuation">}</span> |
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:
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">Person</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> ti <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// Uncaught TypeError: a is not a constructor</span> |
Therefore, an arrow function does not have a prototype
.
1 2 3 | <span class="token keyword">const</span> <span class="token function-variable function">Person</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> Person <span class="token punctuation">.</span> prototype <span class="token punctuation">)</span> <span class="token comment">// undefined</span> |
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!