I remember an interview, I got the prototype chain. When the interviewer was correcting my pen test, he suddenly said that you got this question right, so please draw the complete prototype chain! Afflictive 😣, at that time I also do a little knowledge of the right, I can only blind operation.

Today I’m going to take a look at the prototype chain

To understand what a prototype chain is, you need to know what __proto__, what prototype, and constrtctor are, and how they relate to each other

__proto__ js Function is an object that has a special [[prototype]] built-in property. Almost all search objects are created with a non-null value given by [[prototype]]. Note: [[prototype]] is __proto__. Some books are labeled as [[prototype]] and browsers are __proto__. A prototype chain is a [[prototype]] chain or __proto__ chain.

2, the prototype

Every Function has a Prototype property called a prototype.

3, the constructor

Attributes of the constructor’s prototype constructor attribute points to its itself (such as the constructor Foo, it on the prototype of construstor (namely Foo. The prototype. Construstor = = = Foo) to itself; The constructor of the instance points to the constructor itself (i.e. Foo.constructor === foo)

Let’s warm up with a diagram

Do you often see a diagram like this on the Internet, all kinds of arrows pointing, feeling very difficult.

Well, it’s even harder

You can ignore the rest and look at the prototype chain

You can think of an arrow as a point or you can think of it as an equal sign, and it’s pretty easy to figure out a pattern. Foo, instantiate Foo, and Foo will have a __proto__ property that points to its constructor parent’s prototype foo. prototype, which in turn has a __proto__, Object.prototype.__proto__ is null, and the process of finding attributes ends at null

Son (foo) __proto__ points to father (foo) prototype, father (foo) prototype.__proto__ points to grandfather (Object) prototype… It ends up pointing to null

You end up with a single invocation chain

foo.__proto__ === Foo.prototype // true

Foo.prototype.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true

// From the above relation, the following chain can be obtained
foo.__proto__.__proto__.__proto__ === null // true
Copy the code

When we call a property that Foo doesn’t have, it goes up the chain and stops until it finds it or finds NULL

Code validation

// constructor
function Foo () {
    console.log('Foo constructor ')}/ / foo instance
const foo = new Foo()

console.log('1',foo.__proto__ === Foo.prototype) // true

console.log('2', Foo.prototype.constructor === Foo) // true

console.log('3、', Foo.prototype.__proto__ === Object.prototype) // true

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

console.log('5、', foo.__proto__.__proto__.__proto__ === null) // true

console.log(', 6 ', foo.constructor === Foo.prototype.constructor) // true

console.log('7、', foo.constructor === foo.__proto__.constructor) // true

console.log('8'., foo.constructor === Foo) // true

console.log('9、', Foo.constructor === Object.constructor) // true

console.log('10、', Foo.__proto__ === Function.prototype) // true

console.log('11、'.Function.prototype.__proto__ === Object.prototype) // true

console.log('12,.Function.__proto__ === Function.prototype) // true

console.log('13、'.Function.constructor === Function) // true

console.log(', 14 '.Object.constructor === Function) // true

console.log(', 15 ', Foo.constructor === Function) // true

console.log('16,.Object.__proto__ === Function.prototype) // true
Copy the code

Other articles:

Vue encapsulates the generic notification component Alert

Eight steps to develop a VUE component library

Image lazy loading lozad.js

JS anti – shake, throttling function

VUE implementation principles (data hijacking, observer pattern)

Javascript implements simple bubble sort, insert sort

A very simple publish-subscribe model