JavaScript多态与封装实例分析


Posted in Javascript onJuly 27, 2018

本文实例讲述了JavaScript多态与封装。分享给大家供大家参考,具体如下:

1、静态语言类型和动态语言类型

编程语言按照数据类型可以分为静态语言类型和动态语言类型两大类。

1) 静态语言类型在编译时就已经确定变量的类型

优点:在编译时就能发现类型不匹配的错误,编译器可以帮助我们提前避免程序在运行期间可能发生的一些错误;在程序中明确规定了数据类型,编译器可以针对这些信息对程序进行优化工作。

缺点:迫使程序员依照契约来编写程序,为每个变量规定数据类型;类型的声明也会增加更多的代码,使得程序员难以专注于业务逻辑。

2) 动态类型语言的变量类型需要到程序运行的时候变量被赋值时才能确定。

优点:编写的代码数量少,简洁使得程序员可以更专注于业务逻辑。

缺点:无法保证变量的类型,在程序运行期间可能发生与类型有关的错误。

2、JavaScript多态

多态的思想实际上是:将"做什么"与"谁去做以及怎样去做"分离开,也就是将"不变的事物"与"可能改变的事物"分离开,把不变的事物隔离出来,把可变的部分封装起来。要实现这一点,归根结底就是要消除类型之间的耦合关系。

多态的最根本的作用是:通过把程序化的条件分支语句转化为对象的多态性,从而消除这些条件分支语句。

var student = {
  show: function() {
    console.log('我是学生');
  }
};
var teacher = {
  show: function() {
    console.log('我是老师');
  }
};
var showMe = function(type) {
  if (type == 'teacher')
    teacher.show();
  else if (type == 'student')
    teacher.show();
};
showMe('teacher');
showMe('student');

问题:一旦需要增加新的type对应的show()方法,必须改动showMe()函数。

解决:把程序中相同的部分抽离出来。

var student = {
  show: function() {
    console.log('我是学生');
  }
};
var teacher = {
  show: function() {
    console.log('我是老师');
  }
};
var showMe = function(obj) {
  if (obj.show instanceof Function)
    obj.show();
};
showMe('teacher');
showMe('student');

若需要增加doctor类型对象,只需增加:

var doctor = {
  show: function() {
    console.log('我是医生');
  }
};
showMe(doctor);

设计模式与多态:

绝大部分设计模式的实现都离不开多态性的思想。

3、封装

封装的目的是将信息隐藏。一般封装指的是封装数据和封装实现,但广义的封装还包括封装类型和封装变化。

1) 封装数据

JavaScript没有提供privatepublicprotected等关键字来实现不同的访问权限,只能依赖变量的作用域来实现封装特性,而且只能模拟出privatepublic两种封装性。

除了ES6中提供的let以外,一般通过函数来创建作用域。

var obj = (function() {
  var name = "Alice"; // 模拟private变量
  return {
    getName: function() { // 模拟public方法
      return name;
    }
  }
})();
console.log(obj.name); // 输出:undefined
console.log(obj.getName()); // 输出:Alice

2) 封装实现

从封装实现细节来讲,封装使得对象内部的变化对其他对象而言是透明的,也就是不可见的,对象对自己的行为负责,其他对象或用户不关心其内部实现。封装使得对象之间的耦合变松散,对象之间只通过暴露的API接口来通信。修改一个对象时,可以随意修改它的内部实现,只要对外的接口没有变化,就不会影响程序的其他功能。

例如,迭代器的作用是在不暴露一个聚合对象的内部表示的前提下,提供一种方式来顺序访问这个聚合对象,若有一个each函数,则使用它的人不必关心其内部实现,只有它可以提供正确的功能即可,即使each函数修改了源代码,只要对外的接口或调用方式没有变化,用户就不必关心其内部实现的改变。

3) 封装类型

封装类型是静态类型语言的一种重要封装方式。一般而言,封装类型是通过抽象类和接口来进行的,将对象的类型隐藏到抽象类或接口之后,相比对象的类型,用户更关心对象的行为。在许多静态类型语言的设计模式中,会想方设法地隐藏对象的类型,促使工厂模式、组合模式等设计模式诞生。

在JavaScript中,并没有对抽象类和接口的支持,在封装类型方面,JavaScript没有能力。

4) 封装变化

从设计模式的角度出发,封装更重要的层面体现为封装变化。

通过封装变化的方式,把系统中稳定不变的部分和容易变化的部分隔离开,在系统演变过程中,只需要替换那些容易变化的部分,若这些部分是封装好的,替换起来就会相对容易。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
js 小贴士一星期合集
Apr 07 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
pnpm对npm及yarn降维打击详解
Aug 05 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 #Javascript
react native 文字轮播的实现示例
Jul 27 #Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 #Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 #Javascript
在vue中使用Autoprefixed的方法
Jul 27 #Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 #Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 #Javascript
You might like
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js单例模式的两种方案
2013/10/22 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
毕业生简单求职信
2013/11/19 职场文书
事业单位辞职信范文
2014/01/19 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
天鹅湖观后感
2015/06/09 职场文书
Python访问Redis的详细操作
2021/06/26 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
浅谈Redis缓冲区机制
2022/06/05 Redis