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 相关文章推荐
js中window.open()的所有参数详细解析
Jan 09 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
Javascript中神奇的this
Jan 20 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
sina的lightbox效果。
2007/01/09 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
Python松散正则表达式用法分析
2016/04/29 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python中GIL的使用详解
2018/10/03 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
浅析Python 多行匹配模式
2020/07/24 Python
请解释流与文件有什么不同
2016/07/29 面试题
优质服务活动实施方案
2014/05/02 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
个人总结怎么写
2015/02/26 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL