A prototype is just an object, while a constructor is a pointer to the function that created the object.
A constructor is a pointer. It points to the Function() that created the point from which you are retrieving the constructor from. (i.e a constructor is just a reference to a Function() and we can call it as many times as we want.)
One of the uses of the constructor is to help you create replicate copies of an object. Since the constructor property is a reference to the function that created the object, as long as you have a copy of the object, it will always point to the original constructor.https://coderwall.com/p/qjzbig/understanding-constructor-and-prototype
Using an Object Constructor:
Usually, an object created alone is limited in many situations. It only creates a single object.
Sometimes we like to have an "object type" that can be used to create many objects of one type.
The standard way to create an "object type" is to use an object constructor function:
function person(first, last, email ) {
this.first_name = first;
this.last_name = last;
this.e_mail = email;
}
var myFather = new person("Ibm", "Muh", "ibm@gmail.com");
The above function (person) is an object constructor. Once you have an object constructor, you can create new objects of the same type:
var myFather = new person("Sul", "Ahm", "sul@gmail.com");
Every JavaScript object has a prototype.
A prototype is also an object.
All JavaScript objects inherit their properties and methods from their prototype.
Objects are created using 2 methods of creating an object i.e (1) object literal, or (2) with new Object(), inherit from a prototype called Object.prototype. Objects created with new Date() inherit the Date.prototype.
The Object.prototype is on the top of the prototype chain.
All JavaScript objects (Date, Array, RegExp, Function, ....) inherit from the Object.prototype.https://www.w3schools.com/js/js_object_prototypes.asp
The keyword prototype is a property of Function() objects.
Value of a prototype is the object constructor that created that specific object. Let's see a couple of prototypes:
Boolean.prototype // returns Object Boolean
String.prototype // returns Object String with methods such as "toUpperCase"
Function.prototype // returns function() {} or function Empty() {}
Creating a Prototype:
The standard way to create an object prototype is to use an object constructor function:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
}
var myFather = new Person("John", "Doe", 50);
With a constructor function, you can use the new keyword to create new objects from the same prototype as shown above:
The constructor function is the prototype for Person objects.
It is considered good practice to name constructor function with an upper-case first letter.
Adding Properties to a Prototype
You cannot add a new property to a prototype the same way as you add a new property to an existing object, because the prototype is not an existing object.
Example:
Person.nationality = "English";
To add a new property to a prototype, you must add it to the constructor function:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
All native and complex objects retrieve to their original constructors, which in this case are themselves. The only exception is the Function prototype, which returns the Function() function that created it. Don't confuse it with the constructor, as it's not the same.
Function.prototype === Function.constructor // returns false, Function.constructor is function Function(){}
There's an extra property, __proto__
, which refers to the internal [[proto]] property of instance objects. Unlike Function() objects, every Object has a __proto__
.
It's not recommended to update the prototype of an instance object, as prototypes are not meant to be changed on runtime (you should be able to see who's the proto of who, otherwise you need to spent extra computation in ensuring no cyclic references).