The concepts of Javascript inheritance model, prototype chain and so on are rather obscure and difficult to understand. Many people did not intentionally understand the principles of Javascript when they used it in the past. Today, I will analyze the inheritance, prototype, prototype in Javascript step by step. The author does not intend to write too many text interpretation principles, but hopes to summarize the principles into code fragments for easier understanding.

You just need to know that JavaScript is inherited through something called a prototype chain, relying on the constructor.prototype attribute (the prototype attribute of the constructor). You don't need to understand what the prototype chain is right now. I'll go through it step by step below.

We know that in JavaScript we can create an object through new. We create an object based on a function template. That is to say, the following code

Animal functions are function templates, similar to C++/java class concepts, but new Animal comes out of the concept of objects.

function Animal() {
   this.echo=function () {
       console.log('I am An Animal....')
   };
   this.value=1;
}

_ proto_ attribute is an attribute of an object, which is not exposed in the ECMAScript specification, but can be accessed by some browsers. This attribute value of an object is the prototype value of a function template.

I don't know if that's not easy to understand. Let's change it to another way: object. _proro_==== function template. prototype, if this function comes out of the object.  

We all know that we can use this to refer to the current context in a function. The following code implements inheritance by setting the context this of the constructor.

Code 1

function Animal() {
    this.echo=function () {
        console.log('I am An Animal....')
    };
    this.value=1;
}
//Creating a word-face object creates objects in three ways
var obj1=new function () {};
var obj2={};
var obj3=[]
//Setting three objects into the context of the Animal constructor and calling the Animal function, then this=obj1,obj2,obj3 in the Animal function
Animal.call(obj1);
Animal.call(obj2);
Animal.call(obj3);
obj1.echo();
obj2.echo();
obj3.echo();

Code 2

function Animal() {
    this.echo=function () {
        console.log('I am An Animal....')
    };
    this.value=1;
}

function  Monkey() {
    Animal.call(this);
}
new Monkey().echo();

6. What is the prototype chain?

This concept is actually better understood. If we call a method of an object, how this method does not exist, then go back to his _proto_ search. If we find a direct return, if not, continue to look in _proto_ proto_ search. Like the following code, how does B find value?

Code 1

var A={value:1};
var B={};
B.__proto__=A;
console.log(B.value);

Code 2

function A() {
    this.value=1;
}
function B() {
}
B.prototype=new A();
console.log(new B().__proto__.value);

Code 3

function A() {
    this.value=1;
}
function B() {
}
B.prototype=new A();
console.log(new B().value);

7. Summarize some usage of JavaScript inheritance, type judgment, prototype

Determine the type of a prototype that literally defines an array, and the output is [object Array]

Object.prototype.toString.call([1].__proto__)

The relationship between arrays and objects is illustrated below. The prototype chain []-> Array-> Object returns true

Object.prototype===[].__proto__.__proto__

The toString method that calls the Object prototype of a literal array outputs [object Object]

[].__proto__.__proto__.toString()

Direct call to Object prototype method toString output [object Object object]

Object.prototype.toString([])

call the toString method and set the context to get the real type

console.log(Object.prototype.toString.call([]));
console.log(Object.prototype.toString.call(/x/));
console.log(Object.prototype.toString.call(/x/));
console.log([].__proto__.__proto__.toString.call(/x/ig));
console.log([].__proto__.__proto__.toString.call(null));

Output result

[object Array]
[object RegExp]
[object RegExp]
[object RegExp]
[object Null]

Reference Documents

MDN 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof