极简主义法编写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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
页面使用密码保护代码
Apr 10 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
详解python3百度指数抓取实例
2016/12/12 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
小加工厂管理制度
2014/01/21 职场文书
银行批评与自我批评
2014/02/10 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
保险内勤岗位职责
2014/04/05 职场文书
应聘会计求职信
2014/06/11 职场文书
农村党员对照检查材料
2014/09/24 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
工作能力自我评价2015
2015/03/05 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫