Talking about the prototype and prototype chain in JS

1. Prototype and function

As we all know, JS does not have the concept of classes. Although ES6 has begun to have the concept of classes, this does not mean that JS has a new inheritance model like Java and other class-based object-oriented languages. Classes in ES6 are just a syntactic sugar based on existing prototype inheritance.

A few key points

• Functions have prototypeattributes, pointing to its prototype object. It can also be said: every constructor has aprototype原型对象
• Prototype object has an constructorattribute to it constructor
• Function can create objects using the new operator, object __proto__points to the function prototype object
• Each object has a __proto__property, and points to its prototype prototype object
• Functions can also be seen as an object , it __proto__points to Funtion.prototype
  

---

Look at Object and Function

// 结果都是 "function"
typeof Function
typeof Object
typeof Array

So now we know that these are functions provided by JS itself, and a function is also an object, then it will have:

• prototype Attributes
• __proto__ Attributes

In the prototype object:

• constructor Attributes
• __proto__ Attributes

We now analyze these two properties in Object, Function and their prototype objects

The picture drawn by yourself
is verified in the browser

> Function.__proto__ === Function.prototype
< true
> Function.prototype.constructor === Function
< true
> Function.prototype.__proto__ === Object.prototype
< true
> Object.__proto__ === Function.prototype
< true
> Object.prototype.constructor === Object
< true
> Object.prototype.__proto__ === null
< true

We can conclude that:

• All functions __proto__are pointing Function.prototype
• Prototype object __proto__pointing Object.prototype
• Object.prototype.__proto__ Point to null

When we define a function, the prototype of the "function" object __proto__points toFunction.prototype

function func() {
    
    }

func.__proto__ === Function.prototype // true

---

Then we further look at Object, Function and Array

function fun1() {
    
    }
const obj = {
    
    }
const arr = []

• fun1, obj, and arr can all be regarded as instances of new, they point to Function.prototype, Object.prototype, and Array.prototype respectively.
• Among them, Function.prototype and __proto__ of Array.prototype point to Object.prototype.

---

2. Talk about the __proto__ attribute

For functions: the prototype __proto__ of the object "function" points to Function.prototype

For objects: each object has a __proto__ attribute and points to its prototype object

---

We now pass the function new an object

function Person() {
    
    }
const p1 = new Person()

The current structure is shown in the figure:

---

What is the use of prototype and __proto__?

The __proto__ of the instance object points to the prototype of the constructor, thus achieving inheritance.

The prototype object is equivalent to a public container that all instance objects of a specific type can access

---

3. Prototype chain

When trying to access the properties of an object, it not only searches on the object, but also searches for the prototype of the object and the prototype of the object, searching upwards successively until it finds a property with a matching name or reaches the prototype The end of the chain.

Example: looking for valueOf() method

var arr = [1,2,3]

arr.valueOf()  //  [1, 2, 3]

The prototype chain is as follows:
arr —> Array.prototype —> Object.prototype —> null

This is the legendary prototype chain, look up layer by layer, and return undefined before the end

4.instanceof operator

instanceof principle

The judgment logic of instanceof is: Look up the prototype chain layer by layer from the currently referenced __proto__, can you find the corresponding prototype. Return true if found.

Simple implementation

const instanceOf = (A, B) => {
    
    
  let p = A;
  // 遍历链表
  while (p) {
    
    
    if (p === B.prototype) {
    
    
      return true;
    }
    p = p.__proto__;
  }
  return false;
};

instanceOf(Function, Object); // true

Reference article: Zhihu-talk about prototype, prototype chain and prototype inheritance