Summary and practice of javascript prototype chain diagram

Prototype chain

The class keyword was 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 the new people class, many people are generated, such as Zhang San and Li Si:

let lisi = new People('李四')

But among the vast sea of ​​people, there is a group of people with extraordinary talents. They are called superheroes.

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

class Hero inherits People, so the hero is first an individual with a run method, and then Hero has a superpower heyHa method that ordinary people do not have. We can define a hero called Jinx, who has the superpower of cannon:

let Jinx = new Hero({ name: 'jinx', power: 'cannon!' })

Although the instance Jinx does not define a run method, the prototype chain can be used to find that the People prototype has this run method, 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 searches back up the prototype chain.

Jinx.heyHa() // cannon!
// When it has this method Jinx.run = () => console.log('i just fly!')
Jinx.run() // i just fly!

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

But __prototype__ of Object.prototype is equal to null, and the end of the universe is nothingness. .

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

We can implement a simple JQuery library based on the prototype chain

class JQuery {
  constructor(selector, nodeList) {
    const res = nodeList || document.querySelectorAll(selector);
    const length = res.length;
    for (let i = 0; i < 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 APIs
}
const $$ = (selector) => new JQuery(selector);
$$('body').eq(0).on('click', () => alert('click'));

Run it in the console and the result is as follows:

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!