原型链图解总结及实践

本文深入探讨了JavaScript中的类(class)与原型链的关系,通过实例展示了如何使用原型链实现继承。文章还介绍了一个基于原型链实现的简易JQuery库,包括选择器、事件绑定等基本功能,并提供了扩展插件的方法。通过这种方式,读者可以更好地理解JavaScript的面向对象特性及其在实际开发中的应用。
摘要由CSDN通过智能技术生成

原型链

在ES6中引入了class关键字,但是JS依然是基于原型的,class实际上是语法糖(但既然是ES6的语法规定,那么可以认为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__指向构造函数的原型

在这里插入图片描述

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

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

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

在这里插入图片描述

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

在这里插入图片描述

至此完整的原型链图就是这样的:
在这里插入图片描述

我们可以基于原型链来实现一个简易的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'));

// 利用JQuery的原型能力扩展插件
JQuery.prototype.remove = function() {
  this.each(ele => {
      ele.parentNode.removeChild(ele)
  })
}   

在控制台中运行一下,结果如下:在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值