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 相关文章推荐
jquery一般方法介绍 入门参考
Jun 21 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP队列用法实例
2014/11/05 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python画图学习入门教程
2016/07/01 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
django文档学习之applications使用详解
2018/01/29 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
视图的作用
2014/12/19 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2014年公务员工作总结
2014/11/18 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
余世维讲座观后感
2015/06/11 职场文书
运动会宣传稿100字
2015/07/23 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
Python的三个重要函数详解
2022/01/18 Python