前言
最近几个旧项目里使用的图片编辑插件出现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.
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
