[Study notes] "JavaScript in-depth series from prototype to prototype chain" study notes

A true great god can speak knowledge in an orderly manner! , Stand on the shoulders of giants to learn.
Learning address https://github.com/mqyqingfeng/Blog
Statement: The pictures and content are taken from the above link, here is just to record learning notes, please refer to the above link for the full version.

1. From prototype to prototype chain:

Constructor

function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

Person is a constructor.
Each function has a prototype property;
the prototype property of the function points to an object, which is the prototype of the instance created by calling the constructor; each JavaScript object (except null) of the
prototype is created Then it will be associated with another object, this object is what we call a prototype, and each object will "inherit" properties from the prototype.
__proto__Every JavaScript object (except null) has a property called __proto__, this property will point to the prototype of the object.

Added that
most browsers support this non-standard method to access the prototype, but it does not exist in Person.prototype. In fact, it comes from Object.prototype. It is not a property, it is a getter / Setter, when using obj. proto , can be understood as returning Object.getPrototypeOf (obj).

Each prototype of the constructor has a constructor attribute pointing to the associated constructor.

function Person() {
}
//Person---构造函数
//Person.prototype---实例原型
var person = new Person //person---实例

console.log(person.__proto__ === Person.prototype) //true //__proto__ 前后是两个下划线
console.log(Person.prototype.constructor === Person) //true

//ES5中获取对象原型的方法 Object.getPrototypeOf()
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

supplement

function Person() {
}
var person = new Person();
console.log(person.constructor === Person); //true

When getting person.constructor, in fact, there is no constructor attribute in person. When the constructor attribute cannot be read, it will be read from the prototype of person, that is, Person.prototype, which happens to be in the prototype, so:
person.constructor === Person.prototype.constructor (=== Person)

Instances and prototypes
When reading the properties of an instance, if it cannot be found, it will look for the properties in the prototype associated with the object. If it cannot be found, it will look for the prototype of the prototype, until it finds the top layer.

function Person() {
}
Person.prototype.name = 'AA';

var person = new Person();

person.name = 'BB';
console.log(person.name) //BB

delete person.name;
console.log(person.name) //AA

The prototype of the prototype
mentioned above, the prototype is also an object, since it is an object, you can create it in the most primitive way, namely:

var obj = new Object();
obj.name = 'AA';
console.log(obj.name) //AA

In fact, the prototype object is generated by the Object constructor. In summary, the instance __proto__points to the prototype of the constructor, so the above diagram can be updated to

Prototype chain
So what is the prototype of Object.prototype?
Answer: null

console.log(Object.prototype.__proto__ === null) //true

null means "no object", that there should be no value
so Object.prototype.__proto__the value nullwith Object.prototypeno prototype, in fact, mean the same thing.

Therefore, when searching for attributes, Object.prototypeyou can stop searching.
Therefore, the relationship diagram can be updated to:

In the picture above, the blue line is the prototype chain

Supplement
We mentioned earlier that "every object will 'inherit' properties from the prototype". In fact, inheritance is a very confusing statement. To quote the words in "JavaScript You Didn't Know", is:
inheritance means copy operation, However, JavaScript does not copy the properties of objects by default. On the contrary, JavaScript just creates an association between two objects, so that one object can access the properties and functions of another object through delegation, so it is not called inheritance, delegation . It is more accurate.