<center>![javascript prototypes & ES5](https://files.peakd.com/file/peakd-hive/albro/23viR9N3TuF2GVayLi3syUEP13UKJxtKrc2qfnhtXyeKTMiXe8cSorM4yHZpA4eog6M9A.png)</center>

<p>
    In this post, I'll talk about a concept that may be overlooked by most beginner and sometimes professional programmers: prototypes. Then I'll introduce some methods in ECMAScript 5 because they're very useful.
</p>
<h2>
    What is a prototype?
</h2>
<p>
    In fact, all JavaScript objects inherit their methods and properties from a prototype. These prototypes, as their name suggests, are prototypes and outlines for a class of objects.
</p>
<p>
    In the <a href="https://ecency.com/hive-169321/@albro/constructor-in-javascript-by-albro">previous session</a>, I talked about object constructors and gave you the following example:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Objects&lt;/h2&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
function Person(username, rc, age, eye) {
  this.username = username;
  this.rc = rc;
  this.age = age;
  this.eyeColor = eye;
}
var myFriends = new Person("ocdb", 100, 5, "blue");
var myLove = new Person("leo.voter",100,48,"green");
document.getElementById("demo").innerHTML =
"My Friend is " + myFriends.age + ". My love is " + myLove.age; 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Js Objects](https://files.peakd.com/file/peakd-hive/albro/23u6YysF9NMXiARSdP3TsxGGwxryR5Wm1AGbWB9SWQckr2D14WiYxNEcJy2CfEjvK3g64.png)</center>

<p>
    We cannot add our desired properties to the constructor, and the following code was incorrect:
</p>
<pre><code class="language-javascript">Person.nationality = "English";</code></pre>
<p>
    Rather, we should have added it manually to the constructor function itself:
</p>
<pre><code class="language-javascript">function Person(username, rc, age, eye) {
  this.username = username;
  this.rc = rc;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}</code></pre>
<h3>
    Inherit from prototype
</h3>
<p>
    All JavaScript objects inherit their methods and properties from a prototype, but we did not specify which prototype:
</p>
<ul style="list-style-type:disc;">
    <li>
        <code>Dates</code> inherit from <code>Date.prototype</code>.
    </li>
    <li>
        <code>Arrays</code> inherit from <code>Array.prototype</code>.
    </li>
    <li>
        <code>Persons</code> (the same as our example) inherit from <code>Person.prototype</code>.
    </li>
</ul>
<p>
    So the general rule is that an <code>object</code> inherits from <code>Object.prototype</code>.
</p>
<h3>
    Examples of using prototype
</h3>
<p>
    Now that we have learned about the prototype, you should know that we can access the constructor function through it.
</p>
<p>
    In this example, I want to use prototype to create a new property that did not exist in our object.
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Objects&lt;/h2&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
function Person(username, rc, age, eye) {
  this.username = username;
  this.rc = rc;
  this.age = age;
  this.eyeColor = eye;
}
Person.prototype.nationality = "English";
var myFriends = new Person("ocdb", 100, 5, "blue");
document.getElementById("demo").innerHTML =
"The nationality of my friend is " + myFriends.nationality; 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Js prototype.png](https://files.peakd.com/file/peakd-hive/albro/23uRLPLApFg7LnmXo4AZcGV2wDmBRBk6LxfguoLLsgQhf4csqdn9baeQWZS3Lgj26Cvr3.png)</center>

<p>
    As you can see, I easily added the <code>nationality</code> attribute.
</p>
<p>
    I do the same to add methods:
</p>
<pre><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;h2&gt;JavaScript Objects&lt;/h2&gt;
&lt;p id="demo"&gt;&lt;/p&gt;
&lt;script&gt;
function Person(username, rc, age, eye) {
  this.username = username;
  this.rc = rc;
  this.age = age;
  this.eyeColor = eye;
}
Person.prototype.details = function() {
  return this.username + " RC = " + this.rc
};
var myFriends = new Person("ocdb", 100, 5, "blue");
document.getElementById("demo").innerHTML =
"The details of my friend is " + myFriends.details(); 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<center>![Js Prototype Methods](https://files.peakd.com/file/peakd-hive/albro/23u6Z4abZkgLkvLYt8dQ9aN38khJTnxwTj6RefrGxsbVrQGdQcPeBaj2KXv5EeRYnEe36.png)</center>

<p>
    <strong>Warning:</strong> <i>only change your own prototypes! Do not touch JavaScript's default prototypes and its standard objects, because the whole program will be messed up.</i>
</p>
<h3>
    ECMAScript 5 methods
</h3>
<p>
    In ECMAScript 5, methods for working with objects were introduced. I want to say the most important ones here:
</p>
<pre><code class="language-javascript">// Add or change a property of an object
Object.defineProperty(object, property, descriptor)
// Add or change several properties
Object.defineProperties(object, descriptors)
// Accessing properties
Object.getOwnPropertyDescriptor(object, property)
// Return all properties as an array
Object.getOwnPropertyNames(object)
// Return numeric properties in the form of an array
Object.keys(object)
// access the prototype
Object.getPrototypeOf(object)
// Denying permission to add properties to an object
Object.preventExtensions(object)
// Returns true if we are allowed to add properties to an object
Object.isExtensible(object)
// Denies the permission to change the properties themselves (and not the values).
Object.seal(object)
// Returns true if we are not allowed to add properties to an object
Object.isSealed(object)
// Prevents any changes to the object
Object.freeze(object)
// Returns true if we are not allowed to make changes to the value of the object
Object.isFrozen(object)</code></pre>
<h3>
    Changing the value of a property
</h3>
<p>
    The general structure of the code is as follows:
</p>
<pre><code class="language-javascript">Object.defineProperty(object, property, {value : value})</code></pre>
<p>
    Example:
</p>
<pre><code class="language-javascript">var person = {
  username : "leo.voter",
  rc : "90",
  language : "EN" 
};
// Change a property
Object.defineProperty(person, "language", {value : "NO"});</code></pre>
<h3>
    Change metadata
</h3>
<p>
    The metadata change is as follows:
</p>
<pre><code class="language-javascript">writable : true      // The value of the properties can be changed
enumerable : true    // Properties are countable
configurable : true  // Properties can be configured and adjusted.</code></pre>
<p>
    We also have a False value for each of them, which will be the opposite of the above explanation.
</p>
<h3>
    Get all the properties
</h3>
<p>
    To get all the properties of an object, I can do this:
</p>
<pre><code class="language-javascript">var person = {
  username : "leo.voter",
  rc : "90",
  language : "EN" 
};
Object.defineProperty(person, "language", {enumerable:false});
Object.getOwnPropertyNames(person);  // Returns an array of all properties</code></pre>
<h3>
    Definition of Getter and Setter
</h3>
<p>
    In the previous parts, I talked about <code>Getter</code> and <code>Setter</code>, but you should know that you can also define them with <code>Object.defineProperty()</code>:
</p>
<pre><code class="language-javascript">// Create an object
var person = {
  username : "leo.voter",
  rc : "90",
  language : "EN" 
};
// Define a getter
Object.defineProperty(person, "details", {
  get : function () {return this.username + " RC = " + this.rc;}
});</code></pre>
<p>
    I hope you enjoyed this post. If you liked this post, don't forget to upvote!
</p>
<p>
    &nbsp;
</p>
<p>
    [Hive: @albro]
</p>