JavaScript实现多态和继承的封装操作示例


Posted in Javascript onAugust 20, 2018

本文实例讲述了JavaScript实现多态和继承的封装操作。分享给大家供大家参考,具体如下:

封装Encapsulation

如下代码,这就算是封装了

(function (windows, undefined) {
  var i = 0;//相对外部环境来说,这里的i就算是封装了
})(window, undefined);

继承Inheritance

(function (windows, undefined) {
  //父类
  function Person() { }
  Person.prototype.name = "name in Person";
  //子类
  function Student() { }
  Student.prototype = new Person();      //修复原型
  Student.prototype.constructor = Student;  //构造函数
  Student.prototype.supr = Person.prototype; //父类
  //创建子类实例
  var stu = new Student();
  Student.prototype.age = 28;
  Student.prototype.name = "name in Student instance";
  //打印子类成员及父类成员
  console.log(stu.name); //name in Student instance
  console.log(stu.supr.name); //name in Person
  console.log(stu.age); //28
})(window, undefined);

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun,运行结果如下:

JavaScript实现多态和继承的封装操作示例

多态Polymorphism

有了继承,多态就好办了

//这就是继承了
(function (windows, undefined) {
  //父类
  function Person() { }
  Person.prototype.name = "name in Person";
  Person.prototype.learning = function () {
    console.log("learning in Person")
  }
  //子类
  function Student() { }
  Student.prototype = new Person();      //修复原型
  Student.prototype.constructor = Student;  //构造函数
  Student.prototype.supr = Person.prototype; //父类
  Student.prototype.learning = function () {
    console.log("learning in Student");
  }
  //工人
  function Worker() { }
  Worker.prototype = new Person();      //修复原型
  Worker.prototype.constructor = Worker;  //构造函数
  Worker.prototype.supr = Person.prototype; //父类
  Worker.prototype.learning = function () {
    console.log("learning in Worker");
  }
  //工厂
  var personFactory = function (type) {
    switch (type) {
      case "Worker":
        return new Worker();
        break;
      case "Student":
        return new Student();
        break;
    }
    return new Person();
  }
  //客户端
  var person = personFactory("Student");
  person.learning(); //learning in Student
  person = personFactory("Worker");
  person.learning(); //learning in Worker
})(window, undefined);

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.3water.com/code/HtmlJsRun,运行结果如下:

JavaScript实现多态和继承的封装操作示例

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

Javascript 相关文章推荐
使用隐藏的new来创建对象
Mar 29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 #Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 #Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 #Javascript
获取layer.open弹出层的返回值方法
Aug 20 #Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
详解如何在Vue里建立长按指令
Aug 20 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
PyMongo安装使用笔记
2015/04/27 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python更新所有已安装包的操作
2020/02/13 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python Gabor滤波器讲解
2020/10/26 Python
介绍一下grep命令的使用
2015/06/12 面试题
大学毕业自我鉴定范文
2014/02/03 职场文书
社会实践的活动方案
2014/08/22 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
Redis keys命令的具体使用
2022/06/05 Redis