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 图片预览效果 推荐
Dec 22 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
JavaScript实现筛选数组
Mar 02 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
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
python的几种开发工具介绍
2007/03/07 Python
详解Python中find()方法的使用
2015/05/18 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python科学计算之Pandas详解
2017/01/15 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
英语生日邀请函
2014/01/23 职场文书
技术总监管理职责范本
2014/03/06 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
计算机专业自荐信
2015/03/05 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
MySQL 数据类型详情
2021/11/11 MySQL
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android