Front-end 100 questions cut [017]-one basic, two main lines, dual mechanism to understand the prototype chain

The original intention of writing this series of articles is to "let every front-end engineer master high-frequency knowledge points to help work." This is the 17th cut of the front-end Hundred Topics. I hope that friends will pay attention to the public account "Kite Holder" and arm their minds with knowledge.

17.1 Basics

In js, each object contains a prototype property, which is used to associate another object. After the association, the properties and methods of that object can be used; the objects are linked together through the prototype, which is like using a chain to link each object. Connected together, after hooking each object, a prototype chain is finally formed. (Note: Objects in js are divided into function objects and ordinary objects. Both types of objects have __proto__ attributes, but only function objects have prototype attributes.)

17.2 Prototype chain process

The picture below is a god map of the learning prototype chain circulated on the Internet. Let's post it up and analyze it bit by bit.

17.2.1 Ordinary objects

One type of the js object is a normal object. The main line in the above figure is also based on the normal object. Let's demonstrate it through a piece of code.

const obj = {
    a: 10,
    b: 20
};

console.log(obj);
console.log(obj.__proto__);
console.log(obj.__proto__.__proto__);
console.log(obj.__proto__.constructor);
console.log(obj.__proto__.constructor.__proto__);
console.log(obj.__proto__.constructor.__proto__.__proto__);
console.log(obj.__proto__.constructor.__proto__.constructor);
console.log(obj.__proto__.constructor.__proto__.constructor.__proto__);

The above-mentioned printing result is shown below, and the printing result is exactly the same as the link of the above-mentioned common object.

17.2.2 Function Object

One type of js object is a function object. The main line in the above figure is also based on the function object. Let's demonstrate it through a piece of code.

function fun() {
    let a = 12;
}

console.log(fun);
console.log(fun.__proto__);
console.log(fun.__proto__.__proto__);
console.log(fun.__proto__.__proto__.__proto__);
console.log(fun.__proto__.constructor);
console.log(fun.__proto__.constructor.__proto__);
console.log(fun.__proto__.constructor.__proto__.__proto__);
console.log(fun.__proto__.constructor.__proto__.__proto__.__proto__);

The above print result is shown below, and the print result is exactly the same as the link of the above function object.

17.3 Two mechanisms

The above describes the definition of the prototype chain and its process, so what process is used to find and modify the attributes on it?

17.3.1 Attribute Lookup Mechanism

When searching for the properties of an object, if the property does not exist in the instance object itself, it will look up one level up along the prototype chain. If it is found, it will output. If it does not exist, it will continue to look up one level up along the prototype chain until the end. The top-level prototype object Object.prototype, if it is still not found, undefined will be output;

const obj1 = {
    a: 10
};

const obj2 = {
    b: 20
};

Object.setPrototypeOf(obj2, obj1);

// 由于obj2自身不存在a属性，但是其原型obj1上存在，所以输出其上的值10；
console.log(obj2.a); // 10
// 由于b属性在obj2本身，输出20；
console.log(obj2.b); // 20
// c属性在obj2和其原型上都不存在，则输出undefined。
console.log(obj2.c); // undefined

17.3.2 Attribute modification mechanism

Only modify the properties of the instance object itself, if it does not exist, add the property, if you need to modify the properties of the prototype, you can use: b.prototype.x = 2; but this will cause all instances inherited from the object The attributes of has changed.

const obj1 = {
    a: 10
};

const obj2 = {
    b: 20
};

Object.setPrototypeOf(obj2, obj1);

console.log(obj2); // {b: 20}
console.log(obj1); // {a: 10}
obj2.b = 30;
obj2.a = 50;
// 修改b属性生效，修改a属性在其本身添加了a属性
console.log(obj2); // { b: 30, a: 50 }
console.log(obj1); // { a: 10 }
obj2.__proto__.a = 20;
// 直接修改原型上属性生效
console.log(obj1); // { a: 20 }

1. If you think this article is good, share it, like it, and let more people see it

2. Follow the official account holders, and kill the front-end 100 questions with the account owner