欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript原型链图解的总结和实践

程序员文章站 2022-03-03 08:05:05
目录原型链我们可以基于原型链来实现一个简易的jquery库总结原型链在es6中引入了class关键字,但是js依然是基于原型的,class实际上是语法糖。举个例子,有一个people class:cl...

原型链

在es6中引入了class关键字,但是js依然是基于原型的,class实际上是语法糖。

举个例子,有一个people class:

class people {
  constructor(props) {
    this.name = props.name;
  }
  run() {
    console.log('run')
  }
}

通过new people 这个class 产生了许多的人,张三,李四:

let lisi = new people('李四')

但是茫茫人海中,有一类人天赋异禀,他们这类人叫做超级英雄 class hero

class hero extends people {
   constructor(props) {
    super(props);
    this.power = props.power
   }
   heyha() {
       alert(this.power)
   }
}

class hero 继承了 people,所以英雄首先是个人,具有run方法,然后hero具备普通人不具备的超能力heyha方法。我们可以定义有一个英雄叫做jinx,具有cannon的超能力:

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

尽管实例jinx没有定义run方法,但是通过原型链可以查找到people的原型上具有这个run方法,即它的隐式原型__proto__指向构造函数的原型

javascript原型链图解的总结和实践

当实例访问某个方法或属性时,会从自身开始,然后往原型链上回溯查找

jinx.heyha() // cannon!
// 当自身有该方法时
jinx.run = () => console.log('i just fly!')
jinx.run() // i just fly!

那么people.prototype.__proto__指向哪里呢?object.prototype, 在控制台中输入代码可以看到:

javascript原型链图解的总结和实践

object.prototype__prototype__ 等于 null,宇宙的尽头是虚无。。

javascript原型链图解的总结和实践

至此完整的原型链图就是这样的:

javascript原型链图解的总结和实践

我们可以基于原型链来实现一个简易的jquery库

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)
    })
  }
  // 扩展其他 dom api
}
const $$ = (selector) => new jquery(selector);
$$('body').eq(0).on('click', () => alert('click'));

在控制台中运行一下,结果如下:

javascript原型链图解的总结和实践

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!