JavaScript > Object Oriented Programming

Object Prototypes in JavaScript

Object Prototypes in JavaScript Object-Oriented Programming?


JavaScript Object-Oriented Programming Prototypes

The JavaScript Objects are Date, Array, Regular Expression, Function, ........etc.

All the objects in the JavaScipt inherits the methods and properties from their prototype.

Objects are created withe new Object() or with Object Literal, which is inherit from prototype called Object.prototype, and it is on the top of the prototype chain.

Creating a Prototype

We are taking person as object, the main properties to be considered while taking person as object are name, gender, age, height, etc. But we are taking only few properties into consideration among all those 

<script>
    function person(first, last, gender, height) {
        this.firstName = first;
        this.lastName = last;
        this.gender = gender;
        this.height = height;
    }
</script>

In the above code snippet we have created an object prototype in a standard way.

Adding Properties and Methods to Objects

Adding new properties/methods to an existing object.

Adding new properties/methods to all existing objects of a given type.

Adding new properties or methods to an object prototype.

Adding a property to an object

<script>
    function person(first, last, gender, height) {
        this.firstName = first;
        this.lastName = last;
        this.gender = gender;
        this.height = height;
    }

    var myFriend = new person("Charitha", "Goud", "Female", 5.3);
    var myColleague = new person("Surendra", "Goud", "Male", 5.8);

    myFriend.native = "Madanapalli";  // This is added property

    document.getElementById("myId").innerHTML =
    "My friend is from " + myFriend.native;
</script>

Adding Property to an Object

In the above code snippet there are few properties to a person object like first name, last name, gender, height other than this we have added an extra property i.e 'native' in the script code.

Adding a Method to an Object

<script>
    function person(first, last, gender, height) {
        this.firstName = first;
        this.lastName = last;
        this.gender = gender;
        this.height = height;
    }

    var myFriend = new person("Charitha", "Reddy", "Female", 5.3);
    var myColleague = new person("Surendra", "Goud", "Male", 5.8);
                                                                                               // This is added method in the script code
    myFriend.name = function () {
        return this.firstName + " " + this.lastName;
    };

    docment.getElementById("myId").innerHTML = "My friend is " + myFriend.name();
</script>

Adding a method to an Object

In the above snippet we added an extra method to an object for returning the name of the object.

Adding properties to a Prototype

<p id="myId"></p>

<script>
    function person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }
    person.native = "Madanapalli";

    var myFriend = new person("Charitha", "Reddy", 23, "blue");
    var myColleague = new person("Surendra", "Goud", 23, "brown");

    document.getElementById("myId").innerHTML =
    "My friend is " + myFriend.native;
</script>

Adding properties to a Prototype in a similar way

In the above code snippet we tried to add a new property to a prototype, but it is not possible to add a new property to prototpe like as we add a new property to an existing object, this is beacuse of prototype is not an existing object.

If in case we need to add a property to a prototpe, we must add it to a prototype function.

<p id="myId"></p>

<script>
    function person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
        this.native = "Madanapalli";
    }
    
    var myFriend = new person("Charitha", "Reddy", 23, "blue");
    var mycolleague = new person("Surendra", "Goud", 23, "brown");
    document.getElementById("myId").innerHTML =
    "My friend is from " + myFriend.native + "<br>" + "My Colleague is also from " + mycolleague.native;
</script>

Adding properties to a prototype

In the above code snippet we added property to a prototype function for adding property to prototype.

Adding methods to a Prototype

<p id="myId"></p>

<script>
    function person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
        this.name = function () {
            return this.firstName + " " + this.lastName
        };
    }
    
    var myFriend = new person("Charitha", "Reddy", 23, "blue");
    document.getElementById("myId").innerHTML =
    "My friend is " + myFriend.name();
</script>

Adding methods to a prototype

In the above code snippet we added a method to a prototype.

Adding new properties to an existing prototype

<p id="myId"></p>

<script>
    function person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }
    person.prototype.native = "Madanapalli";

    var myFriend = new person("Charitha", "Reddy", 23, "blue");
    document.getElementById("myId").innerHTML =
    "My friend is from " + myFriend.native;
</script>

Adding new properties to existing prototype

In the above code snippet we added new properties to an existing prototype.

Adding new methods to existing prototype

<p id="myId"></p>

<script>
    function person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }                                                                                                                                                                                     // Adding new methods to existing prototype
    person.prototype.name = function () {   
        return this.firstName + " " + this.lastName
    };

    var myFriend = new person("Charitha", "Reddy", 23, "blue");
    document.getElementById("myId").innerHTML =
    "My friend is " + myFriend.name();
</script>

Adding new methods to existing prototype

In the above code snippet we added a new method to the existing prototype in the script block which is linked with the HTML <p> element through the "myId".

 Views: 472 | Post Order: 202



Write for us