How to realize the javascript prototype chain

This article mainly explains "how to realize the javascript prototype chain". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to realize the javascript prototype chain".

Prototype chain

The class keyword is introduced in ES6, but JS is still prototype-based, and class is actually syntactic sugar.

For example, there is a people class:

Class People {constructor (props) {this.name = props.name;} run () {console.log ('run')}}

Through new people this class has produced a lot of people, Zhang San, Li Si:

Let lisi = new People ('Li Si')

But in the vast sea of people, there is a group of people who are gifted. They are called superheroes class Hero.

Class Hero extends People {constructor (props) {super (props); this.power = props.power} heyHa () {alert (this.power)}}

Class Hero inherits People, so heroes are first individuals with run methods, and then Hero has superpower heyHa methods that ordinary people don't have. We can define a hero named Jinx who has the superpower of cannon:

Let Jinx = new Hero ({name: 'jinx', power:' accountant'})

Although the instance Jinx does not define a run method, you can find this run method on the prototype of People through the prototype chain, that is, its implicit prototype _ _ proto__ points to the prototype of the constructor

When an instance accesses a method or property, it starts with itself and then looks back on the prototype chain

Jinx.heyHa () / Jinx.run Jinx.run / / when you have this method, Jinx.run = () = > console.log ('I just flybeans') Jinx.run () / / method!

So where does People.prototype.__proto__ point? Object.prototype, enter the code in the console to see:

The _ _ prototype__ of Object.prototype is equal to null, and the end of the universe is nothingness.

So far, the complete prototype chain diagram looks like this:

We can implement a simple JQuery library class JQuery {constructor (selector, nodeList) {const res = nodeList | | document.querySelectorAll (selector); const length = res.length; for (let I = 0; I) based on the prototype chain.

< length; i++) { this[i] = res[i] } this.length = length; this.selector = selector; } eq(index) { return new JQuery(undefined, [this[index]]); } each(fn) { for(let i = 0; i < this.length; i ++) { const ele = this[i] fn(ele) } return this; } on(type, fn) { return this.each(ele =>

{ele.addEventListener (type, fn, false)})} / / extend other DOM API} const $$= (selector) = > new JQuery (selector); $$('body'). Eq (0). On (' click', () = > alert ('click'))

Run it in the console, and the results are as follows:

Thank you for your reading, the above is the content of "how to achieve the javascript prototype chain". After the study of this article, I believe you have a deeper understanding of how to achieve the javascript prototype chain, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!