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闭包的理解和实例
Aug 12 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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自动更新新闻DIY
2006/10/09 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python内建模块struct实例详解
2018/02/02 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python绘制多个子图的实例
2019/07/07 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
python与pycharm有何区别
2020/07/01 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
销售部主管岗位职责
2013/12/18 职场文书
活动策划邀请函
2014/02/06 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
MySQL的安装与配置详细教程
2021/06/26 MySQL