This is the third day of my participation in Gwen Challenge

The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the 17th cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds.

17.1 basis

In JS, each object contains a stereotype attribute, which is used to associate another object. After the association, the properties and methods of that object can be used. Objects are linked together by stereotypes, just like a chain linking objects together. After being linked to each object, a prototype chain is formed. (Note: Js objects are divided into function objects and normal objects. Both classes have the __ proto __ attribute, but only function objects have the Prototype attribute.)

17.2 Prototype chain process

Below is an image of the learning prototype chain circulating on the Internet, which we will post for analysis point by point.

17.2.1 Common Objects

One type of JS object is ordinary object. The main line in the figure above is also based on ordinary object. Here is a code to demonstrate it.

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__);
Copy the code

The preceding output is the same as that of the link of the common object.

17.2.2 Function Objects

One type of JS object is function object. One of the main lines in the figure above is also based on function object.

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__);
Copy the code

The print result is as follows. The print result is the same as the link of the function object.

17.3 Two mechanisms

Given the definition of a prototype chain and its flow, what is the flow for finding and modifying properties on it?

17.3.1 Attribute Search mechanism

When finding the attribute of an Object, if the instance Object itself does not have the attribute, it will search up one level along the prototype chain and output when it finds it. If it does not exist, it will continue to search up one level along the prototype chain until it reaches the top-level prototype Object. Prototype.

const obj1 = {
    a: 10
};

const obj2 = {
    b: 20
};

Object.setPrototypeOf(obj2, obj1);

Obj2 does not have an A attribute, but its prototype obj1 does, so output the value 10 on it;
console.log(obj2.a); / / 10
// Since the b attribute is in obj2 itself, output 20;
console.log(obj2.b); / / 20
// if the c attribute does not exist on obj2 or its prototype, undefined is output.
console.log(obj2.c); // undefined
Copy the code

17.3.2 Attribute Modification Mechanism

Only the property of the instance object itself will be modified. If it does not exist, the property will be added. If you need to modify the property of the prototype, you can use: b.prototype.x = 2; This, however, causes the properties of all instances that inherit from the object to change.

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;
// Modify attribute B to take effect, modify attribute A to add attribute A itself
console.log(obj2); // { b: 30, a: 50 }
console.log(obj1); // { a: 10 }
obj2.__proto__.a = 20;
// Modify attributes directly on the prototype to take effect
console.log(obj1); // { a: 20 }
Copy the code

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

2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred