Recently, when I was learning JS prototype chain, I was always confused when I came across prototype and __proto__ attributes, and I was even more confused when I saw the interview questions on the Internet. Therefore, I compared these two attributes and wrote a summary to prevent myself from forgetting them

  1. First look at the MDN explanation for __proto__

The Object. Prototype (en-us) proto property is an accessor property (a getter and a setter) that exposes the interior [[prototype]] (an Object or NULL) of the Object accessed through it.

But it should not be confused with the prototype property of the constructor func. The [[Prototype]] of the instance object created by the constructor points to the Prototype property of func.

So we can now confirm that __proto__ is an accessor property in the JS object that accesses the internal [[Prototype]] property, but the [[Protototype]] property is not the same as the Prototype property in the function

  1. Prototype properties – Function specific properties

Functions are one of the most interesting parts of ECMAScript, mainly because functions are actually objects. Each Function is an instance of the Function type -JS Advanced 4th edition

Function(); prototype is a special property of each JS Function. When we define a function, it has a property that points to a prototype object. When we create an object using this constructor, the object’s __proto__ property points to the constructor’s prototype object

3.1 Look at an example

function Person() {
  this.name = 'Tianj0o'
}
const person = new Person()
console.log(person.__proto__ === Person.prototype)//true
Copy the code

The __proto__ attribute of the Person instance created through the Person constructor points to Person.prototype. What is person. prototype? As we said above, it is a prototype object that is created when the function is defined, so if it is an object, it must also have a __proto__ attribute, so let’s access it

console.log(Person.prototype.__proto__)
[Object: null prototype] {}
Copy the code

If this is an Object, it must be created by a constructor –Object(), so its __proto__ attribute should point to Object.prototype

console.log(Object.prototype) // [Object: null prototype] {}
console.log(Object.prototype === Person.prototype.__proto__)//true
Copy the code

If Object. Prototype is an Object, it should also have a __proto__ attribute pointing to a prototype Object, which also has a __proto__ attribute. Object. Prototype’s __proto__ is null, and the __proto__ attribute search ends there. Prototype This Object is usually called a top-level prototype Object.

If Person is a function object, its constructor should be function. If Person is a function object, its constructor should be function Function(), so its __proto__ attribute should point to function.prototype

console.log(Person.__proto__ === Function.prototype)//true
Copy the code

What is person.__proto_._proto_(function.prototype._proto_)? This is the prototype of the Object() function

console.log(Person.__proto__.__proto__ === Object.prototype)//true
Copy the code

Object. Prototype is found again.

Now this classic picture should be a lot clearer

Thanks for reading 😏😏😁First published on my blog tianj0o.xyz