Interview must ask! , the net all sorts of explanation have, still sum up oneself, impression deeper!

First of all, let’s talk about the meaning, and here I quote the MDN explanation

When it comes to inheritance, JavaScript has only one structure: objects. Each instance object has a private attribute (called __proto__) that points to its constructor’s prototype. The prototype object also has a prototype object of its own (__proto__), cascading up until an object’s prototype object is null. Null, by definition, has no prototype and serves as the last link in the prototype chain. Almost all objects in JavaScript are instances of [Object] at the top of the prototype chain.

Inheritance based on prototype chain

First, let’s look at a simple chestnut:

// Create an object o from a function that has attributes A and B:
let fn = function () {
   this.a = 1;
   this.b = 2;
}
let o = new fn(); // {a: 1, b: 2}

// Define attributes on the prototype of f functions
fn.prototype.b = 3;
fn.prototype.c = 4;
Prototype = {b:3,c:4}; O.[[Prototype]] has attributes B and C (o.__proto__ or O. constructor. Prototype) o.[[Prototype]] Object.prototype. O.[[Prototype]].[[Prototype]].[[Prototype]]. * /
// To sum up, the entire prototype chain is as follows:
// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

console.log(o.a); / / 1
// Is a a property of o? Yes, this property has a value of 1

console.log(o.b); / / 2
// is b a property of o? Yes, this property has a value of 2
// The prototype also has a 'b' attribute, but it will not be accessed.
// This condition is called "property shadowing"

console.log(o.c); / / 4
// Is c a property of o? No, let's see if it's on the prototype
[[Prototype]] // c is an attribute of o.[[Prototype]]. Yes, this property has a value of 4

console.log(o.d); // undefined
// is d a property of o? No, let's see if it's on the prototype
[[Prototype]] // d is an attribute of o.[[Prototype]]. No, let's see if it's on the prototype
// o.[[Prototype]].[[Prototype]] is null
// Find d attribute, return undefined
Copy the code

Do you feel vaguely understood after reading it? Or it’s already a mess. Don’t panic! Let’s see an easy one!

function doSomething(){}
// Add a new attribute week to the function's prototype object
doSomething.prototype.week = 'Saturday'  
// Constructor instantiation
let example = new doSomething();
// Add prop properties to the instance
example.prop = 'example value'

example.__proto__ == doSomething.prototype  //true
console.log(example);
Copy the code

The final printed example is shown below:

Example’s __proto__ ([[prototype]]) property is used to retrieve the prop attribute of example, but the week attribute is not available. Constructor doSomething’s prototype.

Example.__proto__ = doSomething. Prototype = example.__proto__ = doSomething. Prototype: __proto__ Object. Prototype: __proto__ Object.prototype.__proto__ is null, and undefined is returned.

Example –> dosomething. prototype –> object. prototype –> null

I am front-end xiao Meng new thin cool, if my article is helpful to you, please click a like 👍🏻 to support me ~