javascript原型链图解的总结和实践
2022-01-08 04:07
1426 查看
目录
原型链
在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__指向构造函数的原型
当实例访问某个方法或属性时,会从自身开始,然后往原型链上回溯查找
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'));
在控制台中运行一下,结果如下:
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
您可能感兴趣的文章:相关文章推荐
- JavaScript 原型链学习总结
- Javascript基础知识体系化学习总结(二)原型和原型链
- 三、图解JavaScript原型和原型链
- 图解JavaScript——进阶篇(执行上下文、变量对象、作用域、作用域链、闭包、this、原型及原型链、事件循环等一把梭)
- JavaScript原型链与继承内容总结
- redpwnctf-web-blueprint-javascript 原型链污染学习总结
- JavaScript概念总结:作用域、闭包、对象与原型链
- javaScript 原型图解析总结
- JavaScript 原型学习总结
- 8条规则图解JavaScript原型链继承原理
- JavaScript DOM 编程艺术 阅读总结 (第十二章 实践案例代码)
- 三个小人的故事-javascript原型链图解
- javascript----原型总结(2)(显示原型与隐式原型)
- javascript实践总结
- TCP四次挥手关闭连接的图解与实践总结
- JavaScript学习总结(五)原型和原型链详解
- JavaScript 原型学习总结
- JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
- 【js基础】javascript中的原型总结
- JavaScript核心:对象 原型链 构造函数 执行上下文栈 执行上下文 变量对象 活动对象 作用域链 闭包 This 总结