极简主义法编写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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 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
PHP也可以?成Shell Script
2006/10/09 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
python实现查询IP地址所在地
2015/03/29 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
详解python持久化文件读写
2019/04/06 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
初一生物教学反思
2014/01/18 职场文书
数学系个人求职信范文
2014/01/30 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
《画风》教学反思
2014/04/16 职场文书
消防宣传口号
2014/06/16 职场文书
党员民主评议总结
2014/10/20 职场文书
初三化学教学反思
2016/02/22 职场文书
总结Python变量的相关知识
2021/06/28 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技