极简主义法编写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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
JavaScript中this关键字使用方法详解
Mar 08 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Vue实现开心消消乐游戏算法
Oct 22 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
我的论坛源代码(二)
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python多继承原理与用法示例
2018/08/23 Python
numpy.random模块用法总结
2019/05/27 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
大学迎新标语
2014/06/26 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
中学推普周活动总结
2015/05/07 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript