JavaScript Introduction | Object | Prototype

Inheritance

Inheritance means that a new class can use all properties and methods of an existing class.

Through inheritance, existing classes can be modified and reused to meet the requirements of a new program.
It also has the advantage of organizing relationships between objects by forming dependency relationships between classes.
Therefore, inheritance is one of the important characteristics that make up object-oriented programming, along with abstraction and encapsulation.

However, unlike class-based object-oriented languages such as C# or C++, JavaScript is a prototype-based object-oriented language.
Because it is prototype-based, the concept of inheritance is slightly different from class-based object-oriented languages.
In JavaScript, inheritance means using an existing object as a prototype, copying that object, and reusing it.

Prototype

Every JavaScript object has an object called a prototype.
All objects inherit properties and methods from their prototypes.
In this way, every JavaScript object inherits from at least one other object, and the object that provides the inherited information is called the prototype.

Prototype Chain

In JavaScript, objects of the same type created with an object initializer all have the same prototype.
Objects created with the new operator inherit the constructor’s prototype as their own prototype.

var obj = new Object(); // The prototype of this object is Object.prototype.
var arr = new Array();  // The prototype of this object is Array.prototype.
var date = new Date();  // The prototype of this object is Date.prototype.

However, the Object.prototype object does not have any prototype and does not inherit any properties.
All built-in JavaScript constructors and user-defined constructors have this object as their prototype.

var date = new Date(); // This object has not only Date.prototype but also Object.prototype as prototypes.

The virtual connection through which prototypes are inherited is called the prototype chain.
The Object.prototype object is the topmost prototype in this prototype chain.
Therefore, every JavaScript object inherits the Object.prototype object as its prototype.

Creating a Prototype

The most basic way to create a prototype is to write an object constructor function.
If you write a constructor function and create objects with the new operator, you can create objects that share the same prototype.

function Dog(color, name, age) { // writes a constructor function for dogs.
    this.color = color;          // property for color
    this.name = name;            // property for name
    this.age = age;              // property for age
}
var myDog = new Dog("white", "Maru", 1); // This object has Dog as its prototype.
document.write("My dog is an attractive dog named " + myDog.name + " with " + myDog.color + " fur.");

By convention, when writing an object constructor function, only the first letter of the name is capitalized.

Adding Properties and Methods to an Object

The following shows how to add a new property or method to an object that has already been created.

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
var myDog = new Dog("white", "Maru", 1);
myDog.family = "Siberian Husky"; // adds a property for breed.
myDog.breed = function() {       // adds a method that returns the breed including fur color.
    return this.color + " " + this.family;
}
document.write("My dog is a " + myDog.breed() + ".");

In the example above, the newly added family property and breed() method are added only to the myDog instance.
They are not added to any other Dog object that has already been created or will be created later.

Adding Properties and Methods to a Prototype

Adding a new property or method to a prototype requires a different method from adding one to an object. For a prototype, it must be added directly to the constructor function so that it can apply to all other objects created later.

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
    this.family = "Siberian Husky"; // When adding a property to the prototype, it can have a default value.
    this.breed = function() {
        return this.color + " " + this.family;
    };
}
var myDog = new Dog("white", "Maru", 1);
var hisDog = new Dog("brown", "Kongi", 3);
document.write("My dog is a " + myDog.family + ", and my friend's dog is also a " + hisDog.family + ".");

prototype Property

The prototype property lets you easily add new properties or methods to an existing prototype.

function Dog(color, name, age) {
    this.color = color;
    this.name = name;
    this.age = age;
}
// Adds the family property to the existing Dog prototype.
Dog.prototype.family = "Siberian Husky";
// Adds the breed method to the existing Dog prototype.
Dog.prototype.breed = function() {
    return this.color + " " + this.family;
};
var myDog = new Dog("white", "Maru", 1);
var hisDog = new Dog("brown", "Kongi", 3);

document.write("My dog is a " + myDog.family + ", and my friend's dog is also a " + hisDog.family + ".");
document.write("My dog's breed is " + myDog.breed() + ".<br>");
document.write("My friend's dog's breed is " + hisDog.breed() + ".");

You can freely add or delete new properties or methods on prototypes you create directly, as shown above.
You can also modify the prototypes of JavaScript standard objects arbitrarily, but serious errors may occur.
Therefore, you should not modify the prototypes of JavaScript standard objects.