极简主义法编写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 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
利用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
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
js实现网页随机验证码
2020/10/19 Javascript
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
库房管理员岗位职责
2014/03/09 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
单位接收函格式
2015/01/30 职场文书
化验室岗位职责
2015/02/14 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
Python 全局空间和局部空间
2022/04/06 Python