Simple understanding of __proto__, prototype

introduction

There are really more and more things to learn. From the beginning of the variable declaration to the ability to complete a project independently now, I always feel that many of the basics have not been mastered. Looking back and slowly looking at some things, I think it is necessary to record it, especially This is the prototype chain of JavaScript.

First of all, what is __proto__ and prototype? Simply put, __proto__ is the attribute of Object, and prototype is the attribute of Function. In fact, all the variables and methods in JavaScript are objects. But in order to be able to distinguish the two, it is deliberately divided into objects and functions, but in fact the essence of a function is also an object.

Let me throw a question. We have not declared the toString() method that all objects can use, but why can we use this method? Where does this method exist?

Attribute understanding

Easy to understand, build an object and function

  function Fun(){};
  let Obj = new Fun();
  console.log(Obj);

View print
Insert picture description here

Create a construction function through new, where Obj is an object, which can be understood as constructing an instance object Obj through the Fun function.
Print both __proto__ and prototype

console.log(Obj.__proto__===Fun.prototype);

Looking at the
Insert picture description here
two are the same, we can draw a conclusion: the __proto__ attribute of Obj constructed by Fun points to the prototype attribute of Fun, and the prototype attribute of Fun is what exactly is the __proto__ attribute of Obj?

console.log(Fun.prototype);

When I looked
Insert picture description here
at the constructor, I suddenly thought of the class in the es6 syntax, and the constructor method of Fun.prototype when it was called points to the function Fun(), so it can be understood that when a new instance of Fun is constructed, At the same time, a Fun.prototype is constructed. Here, Fun.prototype is called an instance prototype.
So the __proto__ attribute of Obj actually points to the instance object of the function that built it, and we can register the method of this instance object.

  function Fun(){};
  let Obj = new Fun();
  Fun.prototype.sayHello = function(){
    console.log('hello');
  };
  Obj.sayHello();

Check
Insert picture description here
it out, then we can know that Obj's method is registered by the instance prototype of its construction function, and find that this instance prototype is also an object, then continue to find the instance prototype of the constructor function of this instance prototype, which is Obj. proto . proto .

console.log(Obj.__proto__.__proto__);

Looking at it, I
Insert picture description here
finally found this toString method. So far, I found that this object has no __proto__ attribute. Then it can be understood that this instance prototype is the original instance prototype built, and it itself exists in the JavaScript syntax.

Prototype chain

The relationship between this layer of the object's instance prototype is called the prototype chain.
Comparing the inheritance relationship of class, the prototype chain of objects is also the same. The toString method of any object is also inherited from the method of the instance prototype.

problem

But the problem that comes with it is also very big, because we can rewrite the toString method of this prototype instance.

  Object.prototype.toString = function(){
    console.log('没改变而且没有返回值')
  };
  let s = Object();
  let a = s.toString();
  console.log(a);

Check out
Insert picture description here
Baidu. Others can prevent infection by setting Object.create(null)
https://www.bbsmax.com/A/MyJxL26MJn/ You
have to study it carefully