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 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
Javascript中神奇的this
Jan 20 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
浅谈微信小程序之官方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
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
js 文件引入实现代码
2010/04/23 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Python requests模块cookie实例解析
2020/04/14 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Django多个app urls配置代码实例
2020/11/26 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
HTML5应用之文件上传
2016/12/30 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
车辆转让协议书
2014/04/15 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers