JS仿Base.js实现的继承示例


Posted in Javascript onApril 07, 2017

本文实例讲述了JS仿Base.js实现的继承。分享给大家供大家参考,具体如下:

var Klass = function() {};
Klass.extendClass = (function() {
  var F = function() {};
  return function(C, P) {
    F.prototype = P.prototype;
    C.prototype = new F();
    C.uper = P.prototype;
    C.prototype.constructor = C;
  };
})();
Klass.extend = function(props) {
  var _slice = Array.prototype.slice;
  var Glass = function() {
    /*if (Glass.uper && Glass.uper.hasOwnProperty("init")) {
      Glass.uper.init.apply(this, _slice.call(arguments))
    }*/
    if (Glass.prototype.hasOwnProperty("init")) {
      Glass.prototype.init.apply(this, _slice.call(arguments));
    }
  };
  Klass.extendClass(Glass, this);
  Glass.extend = this.extend;
  for (var key in props) {
    if (props.hasOwnProperty(key)) {
      Glass.prototype[key] = props[key];
    }
  }
  return Glass;
};

example:

var A = Klass.extend({
    init: function(name) {
      this.name = name;
      console.log('A constructor is running!');
    },
    getName: function() {
      return this.name;
    }
});
var B = A.extend({
    init: function(name) {
      this.name = name;
      console.log('B constructor is running!');
    },
    getName: function() {
      return this.name;
    },
    a: 'b'
});
var C = B.extend({
    init: function(name) {
      console.log('C constructor is running!');
    },
    c: 'c',
    getName: function() {
      var name = C.uper.getName.call(this);
      return 'Hi, I\'m' + this.name;
    }
});
var c1 = new C('zlf');
console.log(c1.getName());

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

Javascript 相关文章推荐
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
vue-hook-form使用详解
Apr 07 #Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
You might like
URL Rewrite的设置方法
2007/01/02 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
JS的replace方法介绍
2012/10/20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
Vue项目中设置背景图片方法
2018/02/21 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python2.7的编码问题与解决方法
2016/10/04 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
教师旷工检讨书
2014/01/18 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
农业生产宣传标语
2014/10/08 职场文书
转正申请报告格式
2015/05/15 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
企业团队精神心得体会
2016/01/19 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python