PROTOTYPE in JAVASCRIPT

A rather complex roundabout concept that is easy to make front-end developers crazy.

Photo by Sigmund on Unsplash

What is a prototype?

When another developer keeps coming up and asking you, “What the heck is a prototype?”, Answer it: It’s your father’s head, asking questions. This answer is somewhat ludicrous but quite accurate; it can be understood that prototype is either the template or the parent of an object.

In JavaScript, except for undefined, all other types are objects. The string, number, and boolean types are String, Number, and Boolean objects, respectively. Arrays are objects of Array form; functions are objects of Function form. The prototype of each object is its parent. String’s father is String. Prototype, Number’s father is Number.prototype, and Array’s is Array.prototype.

In JavaScript, inheritance is done via a prototype. When we call a property or function of an object, JavaScript will look in the object itself; if not, find its parent. Therefore, we can call toUpperCase functions, trim in String because those functions already exist in String.prototype.

When we add a function to the prototype, all of its children learn the same function.

var str = 'abc'; // str is string, its parent is String.prototype

// Duplicate the input string
String.prototype.duplicate = function () {return this + this; }

console.log (str.duplicate ()); // Found duplicate function in prototype

As I said, Array, Number, or String have an Object parent, so they all have functions such as constructor, hasOwnProperty, toString belonging to Object.prototype.

Recalling a bit of knowledge in the previous article about objects: We have two ways to initialize objects: to use object literal and Constructor Function. If using object literal, the created object will have a prototype of Object.protoype. If using the constructor function, the object has a new prototype; this new prototype inherits the Object.prototype.

var person = {
   firstName: 'Hoang',
   lastName: 'Pham',
   showName: function () {
     console.log (this.firstName + '' + this.lastName);
   }
}; // This object has a prototype of Object.prototype

function Person (firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
   this.showName = function () {
      console.log (this.firstName + '' + this.lastName);
   };
}

var otherPerson = new Person ('John', 'Wick'); // This object has a prototype of Person.prototype
// New prototype: Person.prototype is created
// Person.prototype inherits Object.prototype

Objects created by calling a new Person () have a prototype of Person. prototype. If you want to add fields or functions to these objects, you need to add one more time to the prototype. Literally, the prototype also has a few parts similar to the class, each more sinful.

function Person (firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

Person.prototype.love = function () {console.log ('XXX')};

var otherPerson = new Person ('John', 'Wick'); // This object has a prototype of Person.prototype
otherPerson.love (); // XXX

What is the prototype used for?

Why does this prototype concept spawn? In JavaScript, there is no class concept, so to inherit the fields/functions of an object, we must use the prototype.

function Person () {
   this.firstName = 'Per';
   this.lastName = 'son';
   this.sayName = function () {return this.firstName + '' + this.lastName};
}

// Write another Constructor Function
function SuperMan (firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
}

// I want SuperMan to inherit the properties of Person
// Use prototype to inherit
SuperMan.prototype = new Person ();

// Create a new object with Constructor Function
var sm = new SuperMan ('John', 'Wick');
sm.sayName (); // John Wick. This function inherits from Person's prototype

Strictly speaking, the prototype is somewhat like a class used to implement inheritance in JavaScript. I suddenly got dizzy when writing here; end post today soon. In the following articles, I will talk about OOP in JavaScript, and then you will realize how JavaSscript sida is.