耀极客论坛

 找回密码
 立即注册
查看: 666|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-7 01:23:16 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了javascript原型链图解的总结和实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

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

  举个例子,有一个people class:
  1. class People {
  2.   constructor(props) {
  3.     this.name = props.name;
  4.   }
  5.   run() {
  6.     console.log('run')
  7.   }
  8. }
复制代码
  通过new people 这个class 产生了许多的人,张三,李四:
  1. let lisi = new People('李四')
复制代码
  但是茫茫人海中,有一类人天赋异禀,他们这类人叫做超级英雄 class Hero
  1. class Hero extends People {
  2.    constructor(props) {
  3.     super(props);
  4.     this.power = props.power
  5.    }
  6.    heyHa() {
  7.        alert(this.power)
  8.    }
  9. }
复制代码
  class Hero 继承了 People,所以英雄首先是个人,具有run方法,然后Hero具备普通人不具备的超能力heyHa方法。我们可以定义有一个英雄叫做Jinx,具有cannon的超能力:
  1. let Jinx = new Hero({ name: 'jinx', power: 'cannon!' })
复制代码
  尽管实例Jinx没有定义run方法,但是通过原型链可以查找到People的原型上具有这个run方法,即它的隐式原型__proto__指向构造函数的原型

  当实例访问某个方法或属性时,会从自身开始,然后往原型链上回溯查找
  1. Jinx.heyHa() // cannon!
  2. // 当自身有该方法时
  3. Jinx.run = () => console.log('i just fly!')
  4. Jinx.run() // i just fly!
复制代码
  那么People.prototype.__proto__指向哪里呢?Object.prototype, 在控制台中输入代码可以看到:

  而Object.prototype的__prototype__ 等于 null,宇宙的尽头是虚无。。

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



我们可以基于原型链来实现一个简易的JQuery库
  1. class JQuery {
  2.   constructor(selector, nodeList) {
  3.     const res = nodeList || document.querySelectorAll(selector);
  4.     const length = res.length;
  5.     for (let i = 0; i ‹ length; i++) {
  6.       this[i] = res[i]
  7.     }
  8.     this.length = length;
  9.     this.selector = selector;
  10.   }
  11.   eq(index) {
  12.     return new JQuery(undefined, [this[index]]);
  13.   }
  14.   each(fn) {
  15.     for(let i = 0; i ‹ this.length; i ++) {
  16.       const ele = this[i]
  17.       fn(ele)
  18.     }
  19.     return this;
  20.   }
  21.   on(type, fn) {
  22.     return this.each(ele => {
  23.       ele.addEventListener(type, fn, false)
  24.     })
  25.   }
  26.   // 扩展其他 DOM API
  27. }
  28. const $$ = (selector) => new JQuery(selector);
  29. $$('body').eq(0).on('click', () => alert('click'));
复制代码
  在控制台中运行一下,结果如下:


总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 10:20 , Processed in 0.071361 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表