的汇总达成格局以致部分细节

作者: 计算机前端  发布:2019-12-10

[原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

前言

 

  最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部分页面里的JavaScript 代码被冗余了NN次。部分新同事堆叠了大量的过程式的脚本块(几乎没有利用面向对象封装的概念-虽然面向对象也按需择时),改起来挺累(而且几个项目里各自不同)。本身插件问题已经解决,但是就代码这块儿,针对面向对象的抽离封装,反而想写些东西。虽然没有太多分享价值,自己也忘记不少,翻了下以前的各种代码草稿,还是想尽量做些相对完整的记录和分享。当然,文中若有不妥,欢迎指正。

 

正文

 

  JavaScript 编程本身是不包含传统“类”的概念的,这是不同于我们偏后端的一些强类型对象语言的(例如Java、C#等),而我们往往会利用funciton、 prototype 等关键字来实现一个类似“类”的原型模型(当然也包括各种继承特性)。从而使得项目中的js更优美,更高效。(截至最新的ECMAScript6里也推出了更简单的标准实现,后面会有相关演示)

 

注:所有Demo 均可直接在我的github上下载(地址:https://github.com/tempbing/Javascript-ClassDemos)

 

 

一、首先模拟一个基础版的“类”,常规方式,利用function 和 this 关键字。(这里this关键字 代表调用的当前实例“对象”,不赘述,但初学者一定要深入理解,以前专业书里讲了几十页)。

Tips:这里稍微留意下代码里的相关注释

 

图片 1

 

相关使用EG:

 

图片 2

 

二、然后在这个基础"类"上,额外附加更多特征,直接操作prototype演变成一个丰富的“类”(另:这里有些小细节问题,注意下我在注释里说到的部分细节):

 

图片 3

 

相关使用EG - 读取,这里是一致:

 

图片 4

 

相关使用EG - 更新,这里则有些需要注意(代码里也包含了详细注释提醒,这里不做主要扩展):

 

图片 5

 

还是用文字方式啰嗦提醒下:

 

当进行对象原型上的操作时(这里特指使用prototype 附加操作),需要注意一个容易遗漏的关于内存堆栈的小细节。由于数组(这里是Product原型附加的“tags”)属于引用类型(或者说对象类型),如果用类似于C语言里的指针概念解释则更形象,开辟的内存堆栈空间上,若为引用型,修改了该引用的具体值,那么影响的是所有指向当前堆空间的变量。所以上面修改了product02的 tags值后,再查看product01的 tags值也是同样发生了改变。当然,如果直接改了栈值(或者说指针标记),则等同于将当前指针指向了其他堆空间,属于自身改变了,当然就不会影响到指向原来堆的其他标记(比如操作:product02.tags=['AutumnBing'])。 另:其实很多地方均有这样的概念,容易入坑,这里暂且不深入,注意这个小细节就好)

 

三、关于继承,先利用prototype 原型链做个不是太推荐的简单继承(毕竟原型链的操作需要用到恰当地方,见demo):

 

图片 6

 

相关使用EG:

 

图片 7

 

 

四、更妥当的继承方式,结合“call” 内部回调,操作上下文来实现,也更安全:

 

图片 8

 

相关使用EG:

 

图片 9

 

 

五、目前最新的ES6 中直接推出了专属class概念,作为对象的模板,通过class关键字,可以直接定义封装类 (个人认为更像是一个基于prototype的语法糖,但最起码比ES5的Object.create() 半成品更佳)。

 

图片 10

 

相关使用EG:

 

图片 11

 

 

六、同样,针对class,也拥有了新的继承方式。增加extends和super,更加精简直观,这非常类似于JAVA/C#等强类型语言中的继承方式:

 

图片 12

 

相关使用EG:

 

图片 13

 

 

结语

 

某些时候,我们对于是否面向对象的编程,会有一些实际考虑。但在代码的模块化、插件化开发里,需是毫无疑问的怀抱面向对象的理念。有些东西并不复杂,但延伸的概念和细节依然需要注意。以上本人结合现有知识,进行归纳和总结了关于“类”的一些相关实现方式,包括一些细节问题。如有不妥之处,欢迎各种方式的指正。所有demo,完整演示代码,刚才已全部提交到我的github上去了(地址:https://github.com/tempbing/Javascript-ClassDemos)。夜深了,准备睡了。

 

End.

 

 

本文由澳门新萄京app发布于计算机前端,转载请注明出处:的汇总达成格局以致部分细节

关键词:

上一篇:HTML5
下一篇:本地存储