The prototype inheritance mechanism of JavaScript

Understanding the inheritance mechanism of JavaScript language

JavaScript does not have the concept of "subclass" and "parent class", and there is no distinction between "class" and "instance" (instance), and it relies on a very peculiar "prototype chain" (prototype chain) pattern to implement inheritance.

1. Introduction

In 1994, Netscape needed a web scripting language that enabled browsers to interact with Web pages. Engineer Brendan Eich is responsible for developing this new language. He felt that there was no need to design complex, this language as long as the ability to complete some simple operation is enough, such as to determine whether users fill out the form. This year was the most prosperous period of object-oriented programming (Object-oriented programming).

Brendan Eich is undoubtedly affected by the fact that all data types in JavaScript are objects (object), which is very similar to Java. However, he immediately encountered a problem, in the end should not design "inheritance" mechanism?

If it is really a simple scripting language, there is no need for an "inheritance" mechanism. However, JavaScript is all objects, and there must be a mechanism to link all objects together. As a result, Brendan Eich finally designed the "inheritance".

However, he does not intend to introduce the concept of "class", because once the "class", JavaScript is a complete object-oriented programming language, which seems to be a bit too formal, and increase the beginner's entry difficulty.

He takes into account that Java object-oriented languages use new to generate instances (and, of course, C #, which occurs 6 years later).

Foo foo = new Foo ();

Therefore, he introduces the new command to JavaScript, which is used to generate an instance object from the prototype object. However, JavaScript does not have a "class", how to represent a prototype object? when he thought of Java using the new command, he would call the constructor of the class (constructor). He made a simplified design, in the JavaScript language, the new command was followed by a constructor instead of a class.

For example, there is now a constructor called Cat that represents the prototype of a cat object.

　function Cat (name) {  this. Name = name;}

Using new with this constructor will generate an instance of the cat.

var New cat (' Little Meow ')

Note the This keyword in the constructor, which represents the newly created instance object.

2. Disadvantages of new

One disadvantage of generating instance objects with constructors is that you cannot share properties and methods.

For example, in the constructor of a Cat object, set the common property type of an instance object.

function Cat (name) {  this. Name = name;     this. Type = ' cat section ';}

Then, build two instance objects:

var New cat (' Little Meow '); var New cat (' Big meow ');

The Type property of the two objects is independent, modifying one and not affecting the other.

Cat1.type = ' canine '//  Show ' Cat Department ', unaffected by CAT1

Each instance object has its own copy of the properties and methods. This not only can not do data sharing, but also a huge waste of resources.

3, the introduction of prototype

Given the inadequacy of new, Brendan Eich decided to set a prototype property for the constructor.
All instance objects need to share the properties and methods that are placed inside the prototype, and those that do not need to be shared are placed inside the constructor.
Once the instance object is created, the properties and methods of the prototype object are automatically referenced. In other words, the properties and methods of an instance object are divided into two types, one local and the other referenced.

Or take the cat constructor as an example:

function Cat (name) {  this. Name == {type: ' Cat section ' }; var New cat (' Little Meow '); var New cat (' Big meow '//  canine / /  Canine Division

Now, the type attribute is placed in the prototype object, which is shared by two instance objects. As long as the prototype object is modified, it affects two instance objects at the same time.

Cat.prototype.type = ' Canine branch ';    // Canine Department // Canine Department

4. Summary

Since all instance objects share the same prototype object, it appears from the outside that the prototype object is like a prototype of an instance object, and the instance object is like "inheriting" the prototype object.

The prototype inheritance mechanism of JavaScript