极简主义法编写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 常用代码技巧大收集
Feb 25 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
原生JS实现天气预报
Jun 16 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
python先序遍历二叉树问题
2017/11/10 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
css sprite简单实例
2016/05/23 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
《花瓣飘香》教学反思
2014/04/15 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
Java8中接口的新特性使用指南
2021/11/01 Java/Android
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS