极简主义法编写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插件简单实现代码
Apr 19 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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连接mysql数据库代码
2009/03/10 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP防盗链代码实例
2014/08/27 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
vue中如何使用ztree
2018/02/06 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
python 经典数字滤波实例
2019/12/16 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
如何强制垃圾回收
2015/10/06 面试题
幼儿园教师教学反思
2014/02/06 职场文书
火锅店营销方案
2014/02/26 职场文书
主持词开场白
2014/03/17 职场文书
学校食品安全责任书
2015/01/29 职场文书
资料员岗位职责
2015/02/10 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
详解Redis瘦身指南
2021/05/26 Redis