#JavaScript #Prototype
JavaScript is often referred to as a prototype-based language. Prototype literally means prototype. Every object you create with JavaScript is paired with a prototype, i.e. a prototype object. Using this structure, inheritance, one of the important concepts in Object-Oriented Programming (OOP) using C++, can be easily implemented in JavaScript as well. In JavaScript, this is called a ‘prototype chain’. To understand the prototype chain, you first need to get a feel for the prototype object.
Object creation ¶
In JavaScript, all defined functions can be used as constructors to create objects. This is quite different from C++ where a member function with the same name as the class name is specified as a constructor. Javascript basically provides a function called Object(), and you can create an object as follows by using the operator new.
var a = new Object();
In addition to these methods, objects can be created using object literal notation. It is similar to JSON (JavaScript Object Notation), but there are differences. Using object literal notation, you can create an object as follows, and it is the same as the code above.
var a = {}
Primitive vs Object ¶
There are 7 types of data types in JavaScript: null, undefined, boolean, number, string, symbol, and object. The first six are classified as basic data types as they can clearly identify what they mean by name alone. Everything that is not a primitive datatype is an object type, that is, an object. Judging from the fact that objects are created using JSON-like object literal notation, as we saw earlier, we can vaguely guess that objects are composed of key and value pairs. However, instead of the term key, the name property is used. A JavaScript object consists of property and value pairs.
All non-primitive data types are objects, so functions are objects. Therefore, the Object() force mentioned above is also an object. object is created by object. If you mainly deal with C or C++, it would be one of the shocking facts.
Function object ¶
As described above, an object is composed of a pair of properties and values, and any data type in JavaScript can be assigned to a value. Therefore, even a function that is an object, that is, a function object, can have multiple property and value pairs. A function object has a special property called prototype, which points to its prototype object. As mentioned earlier, every object in JavaScript is paired with a prototype object. That is, the moment you define a function as follows,
function funcA () {}
A function object funcA, which is an object type, is created, and this object has a property called prototype due to the characteristics of the function object. To refer to the properties of a specific object, use .. That is, you can refer to the prototype object of the function object as shown below.
funcA.prototype
Prototype object ¶
function A prototype object is created at the moment the function object is created. This can be referenced with the prototype attribute. Since the prototype object is also an object, the principle is the same as that of creating it using the Object() function or object literal notation. However, the difference from general objects is that they are created without the developer’s knowledge. Therefore, it can be understood that the code below is implicitly executed the moment the function object funcA is created.
var p = new Object();
p.constructor = funcA;
funcA.prototype = p;
p.__proto__ = Object.prototype;
If you understand the code above, a prototype object is created when a function object funcA is created. From the point of view of a function object, a prototype object can be referenced with the property prototype. On the other hand, a prototype object has two properties, constructor and __proto__. The former points back to the function object funcA. This is the content of the creation process and substance of the function object and the created prototype object.
Prototype Chain ¶
One thing that is not explained about the prototype object is the __proto__ property, which is one of the two properties of the prototype object. This property is a property to refer to the prototype of the object that is the cause of creation when general objects other than function objects, that is, including prototype objects, are created. In the previous example, the object that is the ‘cause’ of the prototype object creation is the function object `Object()’, so it refers to the prototype object paired with this function object. After all, the following equation is true.
funcA.prototype.__proto__ === Object.prototype
Earlier, it was said that all functions can be used as constructors to create general objects. Therefore, just as another object can be created using the function object Object(), another object can be created using the function object funcA() as follows.
var objA = new funcA()
As described above, the general object objA has the property __proto__. Since the creation of the object is caused by the function object funcA(), the following equation is true.
objA.__proto__ === funcA.prototype
If we put the two equations side by side, we get
objA.__proto__ === funcA.prototype
funcA.prototype.__proto__ === Object.prototype
Due to the __proto__ property, starting with a normal object, up to two prototype objects are connected in succession. This is called a prototype chain. For this reason, inheritance, one of the important concepts of OOP, can be implemented by using JavaScript chains. If you create an object objB in the same way, it is a different object from objA but references the same prototype object. By using these features, you can create arbitrary properties in the prototype object and use them like class variables in C++.