JavaScript Inherited Properties

JavaScript Inherited Properties with Examples

In this article, I am going to discuss JavaScript Inherited Properties with Examples. Please read our previous article where we discussed How to Delete or Remove a property using JavaScript Property Descriptors with Examples

Inherited Properties in JavaScript

As we already learned in using the Prototype Pattern Chapter that there are many ways to create an object that we have seen so far that there are other ways we can create an object that is from the Object Creation pattern of JavaScript (Factory pattern, Constructor pattern, and Prototype pattern, etc.) among the patterns there is Prototype pattern is there which is a type of object-oriented pattern.

The Prototype pattern is mainly based on JavaScript Prototypical inheritance, where we create an object that is a clone of the original object and acts as a prototype for other objects.

In other words, in terms of prototypical inheritance, the prototype object acts as a blueprint template from which other objects will inherit it when the constructor instantiates them. The Prototype adds the properties of the object to the prototype object. Then, these properties are available and shared among all instances.

JavaScript Inherited Properties with Examples

In the diagram above, we can see that a prototype for the car (a blueprint) is present from which the other types of car objects, car1, and car2, are created. We will be thinking about how these are created. In JavaScript, objects can be cloned/shallow copy by using the Object.create() method.

As we already learned in the Object.create() method section, we can also create new objects using the Object.create() method, which allows us to specify the prototype object. The Prototype means JavaScript objects can inherit properties and behavior from other Objects and properties.

This method can be very useful, because it allows us to choose the prototype object for the object we want to create, without the need to define a constructor function.

In JavaScript, all the objects can inherit properties and behavior from other objects. The object we are inheriting from is called Prototype. All the inherited properties of an object can be found in the prototype object of the constructor, and we can read the inherited properties of an object by calling the __proto__ i.e.: objectName. __proto__

Inherited properties of an object are those properties that have been inherited from the object’s prototype, as opposed to being defined for the object itself, which is known as the object’s own property. To verify if a property is an objects Own property, we can use the hasOwnProperty method.

Property Attributes

Data properties in JavaScript have four attributes.

  1. Value: The object property’s value.
  2. Writable: When true, the object property’s value can be changed
  3. Enumerable: When true, the object property can be iterated over by “for-in” enumeration/loop. Otherwise, the property is called non-enumerable.
  4. Configurable: If false, attempts to delete the object property, change the property to be an access-or property, or change its attributes (other than [[Value]], or changing [[Writable]] attribute to false) will fail.

If an accessor property is inherited, it’s get/getter and set/setter methods will be called when the property is accessed and modified on original objects. If these get and set methods to use a variable to store the value, this value will be shared by all objects. What we discussed above is given in the below example.

Example1: JavaScript Objects, Inherited Properties with variable to store the value and shared by all objects
<html>
<head>
    <title>JavaScript Objects, Inherited properties with variable to store the value and share by all objects example1</title>
</head>
<body>
    <script>
        //myTest function
        function myTest() {
        }

        var value;
        Object.defineProperty(myTest.prototype, "x", {
            get() {
                return value;
            },
            set(x) {
                value = x;
            }
        });

        var a = new myTest();
        var b = new myTest();
        a.x = 10;
        console.log(b.x); // 10
    </script>
</body>
</html>

Output: 10

This issue can be resolved by storing the value in another property. In get and set methods, this keyword points to the object which is used to access or modify the property. What we discussed above is given in the below example.

Example2: JavaScript Objects, Inherited Properties with this keyword
<html>
<head>
    <title>JavaScript Objects, Inherited properties with this keyword example2</title>
</head>
<body>
    <script>
        //myTest function
        function myTest() {
        }

        Object.defineProperty(myTest.prototype, "x", {
            get() {
                return this.stored_x;
            },
            set(x) {
                this.stored_x = x;
            }
        }); 

        var a = new myTest();
        var b = new myTest();
        a.x = 10;
        console.log(b.x); // undefined
    </script>
</body>
</html>

Output: undefined

Unlike accessor properties, value properties are always set on the object itself, not on a prototype object. However, if a non-writable value property is inherited, it still prevents modifying the property on the object. What we discussed above is given in the below example.

Example3: JavaScript Objects, Inherited Properties with the non-writable value property
<html>
<head>
    <title>JavaScript Objects, Inherited properties with non-writable value property example3</title>
</head>
<body>
    <script>
        //myTest function
        function myTest() {
        }

        myTest.prototype.x = 10;
        Object.defineProperty(myTest.prototype, "y", {
            writable: false,
            value: 10
        });

        var a = new myTest();
        a.x = 20;
        console.log(a.x); // 20
        console.log(myTest.prototype.x); // 10

        a.y = 20; // Ignored, throws error in strict mode
        console.log(a.y); // 10
        console.log(myTest.prototype.y); // 10
    </script>
</body>
</html>
Output:

JavaScript Inherited Properties with Examples

In the next article, I am going to discuss JavaScript Object getOwnPropertyDescriptors with Examples. Here, in this article, I try to explain JavaScript Inherited Properties with Examples and I hope you enjoy this JavaScript Inherited Properties with Examples article.

Leave a Reply

Your email address will not be published.