DONATE  
MENU
JAVASCRIPT
JSON
AJAX
CSS
MYSQL
PHP
HTML

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Objects » Prototype Definition
Share Tweet WhatsApp

Prototype Definition

The previous methods(explicit and implicit) of creating objects are limited. Limited because they can only create single objects whose copies cannot be created on other variables. In fact, they are single copies of a prototype (Object()). A prototype is a defined standard or blueprint for creating objects. It specifies the basic properties and methods, an object created from it should possess. It therefore allows us to create numerous objects from it. When we actually define prototypes, what we've defined are not real or directly usable objects. We don't use these prototypes rather we use them in creating other objects of their type which then has all the properties and methods defined in the prototypes. For instance, you might have encountered examples where a value was created using the new keyword:
var num = new Number();
var date = new Date();
var obj = new Object();
Those are instances of us creating usable objects from already defined prototypes(Number(), Date(), Object()). Those variables then contain all the properties or methods that were defined in the prototypes. All JavaScript objects actually have a prototype. Those created using the explicit or Object() prototype(implicit) method have a prototype which is the Object() prototype. In this tutorial, you will learn to define your own prototype from which objects can be created. Syntax To define an object prototype from which numerous objects can be created, the syntax is in same way we define a JavaScript function. The function can be called "object constructor". We thereafter use the this keyword to specify each of the properties and methods that an object created from it should have.
<script>
//OBJECT PROTOTYPE DEFINITION
function app(){
this.name = "StackBeginner";
this.version = "v1.2";
this.author = "Joseph Omamode";
this.changeVersion = function(newV){
this.version = newV;
}
}

//CREATING AN OBJECT FROM THE PROTOTYPE
var myApp = new app;
alert(typeof(myApp));
</script>

Copy PRACTICE IT

Creating Objects From A Prototype To create an object from an already defined prototype, we make use of the new keyword. That means, at every given point in this JavaScript tutorial where we made use of the new keyword, we were actually creating an object from a prototype.
var num = new Number(23);
var str = new String("Hello World");
var bool = new Boolean(true);
var obj = new Object();
The new keyword is a JavaScript reserved keyword which means it cannot and shouldn't be used in naming variables or functions. Static Properties & Methods A property or method is static if we can directly access such a property or method of a prototype without having to create an object from the prototype with the new keyword. The MIN_VALUE and isNaN() are examples of a static property and method respectively. They are used directly with the Number() prototype without having to create an object from it.
Number.MIN_VALUE;
Number.isNaN(8);
Creating Static Properties & Methods
<script>
function Person(){
} //An empty prototype defined with an object constructor

//ADD STATIC PROPERTY
Person.alias = "Homo Sapien"; //static property

//ADD STATIC METHOD
Person.gender = function (k){
var gender;
switch (k){
case "m":
gender = "male"; break;
case "f":
gender = "female"; break;
default:
gender = "unknown";
}
return gender;
}; //static method

//USING STATIC PROPERTY AND METHOD
document.write("The gender of this "+Person.alias+" is "+Person.gender("f")+".");
</script>

Copy PRACTICE IT

Above is how you can create static properties and methods on prototypes. Notice how we used the property and method on the prototype without needing to create an object from it with the new keyword. Constructor Functions In other programming languages, a constructor function is a function that executes immediately or moment an object is created or instantiated from a class(equivalent of prototype). The constructor helps in initializing variables(properties/methods). Same can apply to JavaScript objects created from a prototype. But unlike other programming languages using "classes", JavaScript object's prototypes are already defined just like a function. Therefore, we use parameters and arguments as constructors to initialize properties and methods. This constructors therefore help us to ensure that at every time a new object is created from a prototype, its values are in some ways unique though it possesses same properties and methods with others created from the prototype. For example, if we have an object prototype called Animal having a name and a sound as properties from which we can create various animals, the constructor can help us ensure each animal has its own name and sound.
<script>
//DEFINING OBJECT PROTOTYPE
function Animal(name, sound){
this.name = name;
this.sound = sound;
}

//CREATING OBJECTS WITH PROTOTYPE
var dog = new Animal("Dog", "Whooa Whooa"); //A dog
var snake = new Animal("Snake","hissssss hisssss");
alert("A "+dog.name+" sound is "+dog.sound);
alert("A "+snake.name+" sound is "+snake.sound);
</script>

Copy PRACTICE IT

Above, you can see how we were able to create new objects out of a prototype while the constructor function helped us ensure the various objects had different values for the properties of the object. Same scenario applies when we create Date objects in JavaScript.
var d = new Date(12284840); //Create a date using the argument passed
d = new Date(); //Uses default parameter values to create a date of the current moment since no argument was passed
You will learn about the Date Object later. Change Object Properties & Methods You can change any property or method of an object created from a prototype just the way you change the properties and methods of objects created using the explicit and implicit method. It won't affect the prototype or other objects created from the prototype.
<script>
    //OBJECT PROTOTYPE DEFINITION
    function Product(id, name){
this.id = id;
this.name = name;
this.price = 0;
this.getInfo = function(){
};
}

//CREATING OBJECTS FROM PROTOTYPE
var tShirt = new Product(111,"StackBeginner T - Shirt");
var app = new Product(34, "myApp");

//Changing an object property
tShirt.price = 350;

alert(tShirt.price);
alert(app.price);
 </script>

Copy PRACTICE IT

Above, you can see that despite changing a property(price) of an object(tShirt) created from a prototype, the change didn't affect the second object(app) created from the prototype. Add Object Properties & Methods To add a property or method to any object created from a prototype, the syntax is,
objectName.newProperty/Method = value;
<script>
//PROTOTYPE DEFINITION
function Product(name){
this.name = name;
}

//CREATING OBJECTS FROM PROTOTYPE
var phone = new Product("Iphone 12");
var phone1 = new Product("Nokia 3310");

//ADDING NEW PROPERTY TO OBJECT
phone.os = "iOS";
alert(phone.os);

alert(phone1.os);//Undefined cause this property was added to the first object only
</script>

Copy PRACTICE IT

To add a property or method to the prototype so that all objects created from it can possess that property or method, the syntax is,
prototypeName.prototype.newProperty/Method = value;
<script>
//PROTOTYPE DEFINITION
function Product(name){
this.name = name;
}

//CREATING OBJECTS FROM PROTOTYPE
var phone = new Product("Iphone 12");
var phone1 = new Product("Nokia 3310");

//ADDING NEW PROPERTY TO PROTOTYPE
Product.prototype.os = "Unknown";

alert(phone.os);
alert(phone1.os);
</script>

Copy PRACTICE IT

Difference B/W Object Constructor & Prototype You might have been confused as regard the difference between an object constructor and a prototype but then, there should be no cause for alarm. An object constructor is a function used in defining a prototype. Therefore, we can say a prototype is what is obtained or created by an object constructor. An object constructor can also be seen as a constructor function. Constructor functions are object constructors that define a prototype that do not only allow us create objects but also, have parameters that enable us initialize some properties or methods. REITERATION Prototypes are defined to create objects. Therefore, when a prototype exists, we can create an object from it. Explicit and implicit objects are objects created from the JavaScript Object() prototype. These objects are equivalent to whatever object you create from just any other prototype(JS predefined or your self - defined) and as such, can't create other objects. Only prototypes can create objects and all objects have a prototype. SUMMARY
  1. Since we use the explicit and implicit methods of object creation to create single objects, we can decide define a prototype that has our desired properties and methods and can thereafter create various objects from that prototype.
  2. We define a prototype using an object constructor. It is defined just like a function while we use the this keyword to specify various properties and methods.
  3. A constructor function is an object constructor that.
  4. To create an object from a prototype, we make use of the new keyword.
Take a short quiz on Prototype Definition.
Ask a question or tell us if Prototype Definition is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode