极简主义法编写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插件开发方法(初学者)
Feb 03 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
Vue使用NPM方式搭建项目
2018/10/25 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python isinstance函数介绍
2015/04/14 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
Python3.4解释器用法简单示例
2019/03/22 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
PyTorch实现AlexNet示例
2020/01/14 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
工程监理应届生求职信
2013/11/09 职场文书
项目投资意向书
2014/04/01 职场文书
文化产业实施方案
2014/06/07 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
大学生自荐信范文
2015/03/05 职场文书
暑期家教宣传单
2015/07/14 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
Java输出Hello World完美过程解析
2021/06/13 Java/Android
日元符号 ¥
2022/02/17 杂记