[原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】
2017-10-24 01:38
363 查看
前言
最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部分页面里的JavaScript 代码被冗余了NN次。部分新同事堆叠了大量的过程式的脚本块(几乎没有利用面向对象封装的概念-虽然面向对象也按需择时),改起来挺累(而且几个项目里各自不同)。本身插件问题已经解决,但是就代码这块儿,针对面向对象的抽离封装,反而想写些东西。虽然没有太多分享价值,自己也忘记不少,翻了下以前的各种代码草稿,还是想尽量做些相对完整的记录和分享。当然,文中若有不妥,欢迎指正。
正文
JavaScript 编程本身是不包含传统“类”的概念的,这是不同于我们偏后端的一些强类型对象语言的(例如Java、C#等),而我们往往会利用funciton、 prototype 等关键字来实现一个类似“类”的原型模型(当然也包括各种继承特性)。从而使得项目中的js更优美,更高效。(截至最新的ECMAScript6里也推出了更简单的标准实现,后面会有相关演示)
【所有Demo 均可直接在我的github上下载(地址:https://github.com/tempbing/Javascript-ClassDemos) 】
一、首先模拟一个基础版的“类”,常规方式,利用function 和 this 关键字。(这里this关键字 代表调用的当前实例“对象”,不赘述,但初学者一定要深入理解,以前专业书里讲了几十页)。
Tips:这里稍微留意下代码里的相关注释
相关使用EG:
二、然后在这个基础"类"上,额外附加更多特征,直接操作prototype演变成一个丰富的“类”(另:这里有些小细节问题,注意下我在注释里说到的部分细节):
相关使用EG - 读取,这里是一致:
相关使用EG - 更新,这里则有些需要注意(代码里也包含了详细注释提醒,这里不做主要扩展):
还是用文字方式啰嗦提醒下:
当进行对象原型上的操作时(这里特指使用prototype 附加操作),需要注意一个容易遗漏的关于内存堆栈的小细节。由于数组(这里是Product原型附加的“tags”)属于引用类型(或者说对象类型),如果用类似于C语言里的指针概念解释则更形象,开辟的内存堆栈空间上,若为引用型,修改了该引用的具体值,那么影响的是所有指向当前堆空间的变量。所以上面修改了product02的 tags值后,再查看product01的 tags值也是同样发生了改变。当然,如果直接改了栈值(或者说指针标记),则等同于将当前指针指向了其他堆空间,属于自身改变了,当然就不会影响到指向原来堆的其他标记(比如操作:product02.tags=['AutumnBing'])。 另:其实很多地方均有这样的概念,容易入坑,这里暂且不深入,注意这个小细节就好)
三、关于继承,先利用prototype 原型链做个不是太推荐的简单继承(毕竟原型链的操作需要用到恰当地方,见demo):
相关使用EG:
四、更妥当的继承方式,结合“call” 内部回调,操作上下文来实现,也更安全:
相关使用EG:
五、目前最新的ES6 中直接推出了专属class概念,作为对象的模板,通过class关键字,可以直接定义封装类 (个人认为更像是一个基于prototype的语法糖,但最起码比ES5的Object.create() 半成品更佳)。
相关使用EG:
六、同样,针对class,也拥有了新的继承方式。增加extends和super,更加精简直观,这非常类似于JAVA/C#等强类型语言中的继承方式:
相关使用EG:
结语
某些时候,我们对于是否面向对象的编程,会有一些实际考虑。但在代码的模块化、插件化开发里,需是毫无疑问的怀抱面向对象的理念。有些东西并不复杂,但延伸的概念和细节依然需要注意。以上本人结合现有知识,进行归纳和总结了关于“类”的一些相关实现方式,包括一些细节问题。如有不妥之处,欢迎各种方式的指正。所有demo,完整演示代码,刚才已全部提交到我的github上去了(地址:https://github.com/tempbing/Javascript-ClassDemos)。夜深了,准备睡了。
End.
最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部分页面里的JavaScript 代码被冗余了NN次。部分新同事堆叠了大量的过程式的脚本块(几乎没有利用面向对象封装的概念-虽然面向对象也按需择时),改起来挺累(而且几个项目里各自不同)。本身插件问题已经解决,但是就代码这块儿,针对面向对象的抽离封装,反而想写些东西。虽然没有太多分享价值,自己也忘记不少,翻了下以前的各种代码草稿,还是想尽量做些相对完整的记录和分享。当然,文中若有不妥,欢迎指正。
正文
JavaScript 编程本身是不包含传统“类”的概念的,这是不同于我们偏后端的一些强类型对象语言的(例如Java、C#等),而我们往往会利用funciton、 prototype 等关键字来实现一个类似“类”的原型模型(当然也包括各种继承特性)。从而使得项目中的js更优美,更高效。(截至最新的ECMAScript6里也推出了更简单的标准实现,后面会有相关演示)
【所有Demo 均可直接在我的github上下载(地址:https://github.com/tempbing/Javascript-ClassDemos) 】
一、首先模拟一个基础版的“类”,常规方式,利用function 和 this 关键字。(这里this关键字 代表调用的当前实例“对象”,不赘述,但初学者一定要深入理解,以前专业书里讲了几十页)。
Tips:这里稍微留意下代码里的相关注释
相关使用EG:
二、然后在这个基础"类"上,额外附加更多特征,直接操作prototype演变成一个丰富的“类”(另:这里有些小细节问题,注意下我在注释里说到的部分细节):
相关使用EG - 读取,这里是一致:
相关使用EG - 更新,这里则有些需要注意(代码里也包含了详细注释提醒,这里不做主要扩展):
还是用文字方式啰嗦提醒下:
当进行对象原型上的操作时(这里特指使用prototype 附加操作),需要注意一个容易遗漏的关于内存堆栈的小细节。由于数组(这里是Product原型附加的“tags”)属于引用类型(或者说对象类型),如果用类似于C语言里的指针概念解释则更形象,开辟的内存堆栈空间上,若为引用型,修改了该引用的具体值,那么影响的是所有指向当前堆空间的变量。所以上面修改了product02的 tags值后,再查看product01的 tags值也是同样发生了改变。当然,如果直接改了栈值(或者说指针标记),则等同于将当前指针指向了其他堆空间,属于自身改变了,当然就不会影响到指向原来堆的其他标记(比如操作:product02.tags=['AutumnBing'])。 另:其实很多地方均有这样的概念,容易入坑,这里暂且不深入,注意这个小细节就好)
三、关于继承,先利用prototype 原型链做个不是太推荐的简单继承(毕竟原型链的操作需要用到恰当地方,见demo):
相关使用EG:
四、更妥当的继承方式,结合“call” 内部回调,操作上下文来实现,也更安全:
相关使用EG:
五、目前最新的ES6 中直接推出了专属class概念,作为对象的模板,通过class关键字,可以直接定义封装类 (个人认为更像是一个基于prototype的语法糖,但最起码比ES5的Object.create() 半成品更佳)。
相关使用EG:
六、同样,针对class,也拥有了新的继承方式。增加extends和super,更加精简直观,这非常类似于JAVA/C#等强类型语言中的继承方式:
相关使用EG:
结语
某些时候,我们对于是否面向对象的编程,会有一些实际考虑。但在代码的模块化、插件化开发里,需是毫无疑问的怀抱面向对象的理念。有些东西并不复杂,但延伸的概念和细节依然需要注意。以上本人结合现有知识,进行归纳和总结了关于“类”的一些相关实现方式,包括一些细节问题。如有不妥之处,欢迎各种方式的指正。所有demo,完整演示代码,刚才已全部提交到我的github上去了(地址:https://github.com/tempbing/Javascript-ClassDemos)。夜深了,准备睡了。
End.
相关文章推荐
- javascript 模拟java 实现继承的5种方式
- c语言部分库函数,代码实现,以及细节理解
- c语言部分库函数,代码实现,以及细节理解
- JavaScript模拟实现封装的三种方式及写法区别
- c语言部分库函数,代码实现,以及细节理解
- 用JavaScript以及iframe实现WEB页面的部分刷新
- [原创]B/S页面From表单填写时用回车代替TAB的动态javascript实现方式
- (10) 使用Spring的注解方式实现AOP入门 以及 细节
- Spring学习札记:第2节 属性注入方式以及模拟BeanFactory实现
- javascript里模拟sleep(两种实现方式)
- JavaScript原型链以及ES3、ES5、ES6实现继承的不同方式
- 初识树结构,简单模拟无规律的二叉树,实现二叉树的构建,计算树的深度以及三种遍历方式以及搜索删除,销毁整个树
- (9) 使用Spring的注解方式实现AOP入门 以及 细节
- 博客园的模拟登录实现以及加密方式浅析
- (一)常见UI界面以及部分功能的实现
- excel 单元格的锁定 以及 JXL的实现方式
- Solr的自动完成实现方式(第三部分:Suggester方式续)
- java数据结构之实现 二叉树 以及二叉树的遍历方式(三)
- Java-->IO流模拟实现用户登录以及登录信息