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

作者:夏天的骑士 时间:2024-07-27 21:54:34 

原型链

在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原型链图解的总结和实践

总结

本篇文章就到这里了,希望能够给你带来帮助!

来源:https://blog.csdn.net/gsnmtorrent/article/details/122226692

标签:javascript,原型链,图解,总结,实践
0
投稿

猜你喜欢

  • 利用python实现简单的循环购物车功能示例代码

    2021-05-12 14:52:58
  • 几行代码轻松实现PHP文件打包下载zip

    2024-06-05 09:47:49
  • 解决node.js安装包失败的几种方法

    2024-05-08 09:36:34
  • jquery表单验证使用插件formValidator

    2023-07-02 05:30:54
  • 利用Python小工具实现3秒钟将视频转换为音频

    2023-05-26 21:11:34
  • 在ASP.NET 2.0中操作数据之五十五:编辑和删除现有的二进制数据

    2023-07-10 02:05:43
  • 原生JavaScript实现网页版计算器

    2024-04-23 09:27:08
  • MySQL优化方案之开启慢查询日志

    2024-01-23 09:30:23
  • Go流程控制代码详解

    2023-09-01 10:21:12
  • SQLServer导出数据到MySQL实例介绍

    2024-01-13 08:07:17
  • python3 tcp的粘包现象和解决办法解析

    2022-08-02 02:22:53
  • mysql 5.7.17 winx64安装配置图文教程

    2024-01-28 04:57:13
  • python中的txt文件转换为XML

    2021-12-05 10:45:48
  • MySQL Binlog 日志处理工具对比分析

    2024-01-28 00:20:08
  • python爬虫 requests-html的使用

    2023-05-08 02:41:16
  • Python网络编程之ZeroMQ知识总结

    2022-07-06 20:16:25
  • python 统计一个列表当中的每一个元素出现了多少次的方法

    2021-09-21 13:48:32
  • python实现连续变量最优分箱详解--CART算法

    2023-01-15 16:33:05
  • 使用keras实现BiLSTM+CNN+CRF文字标记NER

    2022-05-01 04:46:22
  • 文字的减法

    2007-11-06 12:58:00
  • asp之家 网络编程 m.aspxhome.com