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复选框checkbox实现删除前判断
Apr 20 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
js实现动态显示时间效果
Mar 06 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue中路由跳转不计入history的操作
Sep 21 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
革命先烈的英雄事迹材料
2014/02/15 职场文书
公司经理聘任书
2014/03/29 职场文书
应聘教师求职信
2014/07/19 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
php字符串倒叙
2021/04/01 PHP
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
python如何查找列表中元素的位置
2022/05/30 Python