极简主义法编写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 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 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正则提取图片地址
2014/03/27 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
python自动下载图片的方法示例
2020/03/25 Python
python实现扫雷游戏的示例
2020/10/20 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
初三政治教学反思
2014/01/30 职场文书
大学生先进事迹材料
2014/02/16 职场文书
检举信的格式及范文
2014/04/04 职场文书
公司踏青活动方案
2014/08/16 职场文书
给老婆的检讨书
2015/01/27 职场文书
行政处罚事先告知书
2015/07/01 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
Redis实现分布式锁的五种方法详解
2022/06/14 Redis