极简主义法编写JavaScript类


Posted in Javascript onNovember 02, 2017

这个所谓的"极简主义法"是荷兰程序员Gabor de Mooij提出来的,这种方法不使用this和prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因。下面就介绍如何使用极简主义法完成JavaScript的封装和继承

1. 封装

首先,它也是用一个对象模拟"类"。在这个类里面,定义一个构造函数createNew(),用来生成实例。

var Cat = {
 
createNew: function(){
 


// some code here
 

}
 };

然后,在createNew()里面,定义一个实例对象,把这个实例对象作为返回值。

var Cat = {
 
createNew: function(){
 


var cat = {};
 


cat.name = "大毛";
 


cat.makeSound = function(){ alert("喵喵喵"); };
 


return cat;
 

}
 };

使用的时候,调用createNew()方法,就可以得到实例对象。

var cat1 = Cat.createNew();
 cat1.makeSound(); // 喵喵喵

这种方法的好处是,容易理解,结构清晰优雅,符合传统的"面向对象编程"的构造,因此可以方便地部署下面的特性。

2. 继承

让一个类继承另一个类,实现起来很方便。只要在前者的createNew()方法中,调用后者的createNew()方法即可。

先定义一个Animal类:

var Animal = {
 
createNew: function(){
 


var animal = {};
 


animal.sleep = function(){ alert("睡懒觉"); };
 


return animal;
 

}
 };

然后,在Cat的createNew()方法中,调用Animal的createNew()方法

var Cat = {
 
createNew: function(){
 


var cat = Animal.createNew();
 


cat.name = "大毛";
 


cat.makeSound = function(){ alert("喵喵喵"); };
 


return cat;
 

}
 };

这样得到的Cat实例,就会继承Animal类。

var cat1 = Cat.createNew();
 cat1.sleep(); // 睡懒觉

3. 私有属性和私有方法

在createNew()方法中,只要不是定义在cat对象上的方法和属性,都是私有的。

var Cat = {
 
createNew: function(){
 


var cat = {};
 


var sound = "喵喵喵";//私有属性
 


cat.makeSound = function(){ 
      alert(sound); 
     };
 


return cat;
 

}
 };

上例的内部变量sound,外部无法读取,只有通过cat的公有方法makeSound()来读取。

var cat1 = Cat.createNew();
 alert(cat1.sound); // undefined

4. 数据共享

有时候,我们需要所有实例对象,能够读写同一项内部数据。这个时候,只要把这个内部数据,封装在类对象的里面、createNew()方法的外面即可。

var Cat = {
 
sound : "喵喵喵",
 

createNew: function(){
 


var cat = {};
 


cat.makeSound = function(){ alert(Cat.sound); };
 


cat.changeSound = function(x){ Cat.sound = x; };
 


return cat;
 

}
 };

然后,生成两个实例对象:

var cat1 = Cat.createNew();
 var cat2 = Cat.createNew();
 cat1.makeSound(); // 喵喵喵

这时,如果有一个实例对象,修改了共享的数据,另一个实例对象也会受到影响。

cat2.changeSound("啦啦啦");
 cat1.makeSound(); // 啦啦啦

 

极简主义,看起来很美好,但是也有缺点,首先是不能使用instanceof 判断对象所属的类,"cat1 instanceof Cat"无法通过,另外,极简主义虽然摆脱了使用原型链的缺点(属性不能私有、创建、继承对象不够直观),但也暴露了没用原型链的弊端:每一次生成一个实例,都必须为重复的内容,多占用一些内存。

总结

以上所述是小编给大家介绍的极简主义法编写JavaScript类,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
原生JS实现瀑布流插件
Feb 06 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue无限轮播插件代码实例
May 10 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
利用nvm管理多个版本的node.js与npm详解
Nov 02 #Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 #Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 #Javascript
为输入框加入数字js校验代码分享
Nov 02 #Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 #Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 #Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 #Javascript
You might like
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
用Flash图形化数据(二)
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
表单内同名元素的控制
2006/11/22 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
详解Python中的文件操作
2021/01/14 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
小学英语教学反思案例
2014/02/04 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js