极简主义法编写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 相关文章推荐
javascript this用法小结
Dec 19 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
vue的toast弹窗组件实例详解
May 14 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
Protoss魔法科技
2020/03/14 星际争霸
深入分析PHP引用(&)
2014/09/04 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
csdn 博客的css样式 v3
2009/02/24 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
js href的用法
2010/05/13 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
机器学习10大经典算法详解
2017/12/07 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
如何在django中添加日志功能
2020/02/06 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
银行办理业务介绍信
2014/01/18 职场文书
电大本科自我鉴定
2014/02/05 职场文书
离婚协议书格式
2014/11/21 职场文书
公司更名通知函
2015/04/24 职场文书
小学少先队活动总结
2015/05/08 职场文书
物业公司管理制度
2015/08/05 职场文书