javascript作为前端开发的标配技能,如果不掌握好它的三大特点:1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢?如果标配的技能都没有撑握好,怎么可以任性的玩耍呢?怎么验证自己学好了以上三个基本点呢,我找到一段不错的代码,稍加改动,如果能够读懂它,那么你就可以任性了。

function jClass(baseClass, prop) {

     // 只接受一个参数的情况 - jClass(prop)
if (typeof(baseClass) === "object") {
prop = baseClass;
baseClass = null;
} // 本次调用所创建的类(构造函数)
function F() {
// 调用init原型函数
this.init.apply(this, arguments);
} // 如果此类需要从其它类扩展
if (baseClass) {
F.prototype = Object.create(baseClass.prototype);
//重置构造函数的指向
F.prototype.constructor = F;
} // 覆盖父类的同名函数 for (var name in prop) {
if (prop.hasOwnProperty(name)) {
// 如果此类继承自父类baseClass并且父类原型中存在同名函数name
if (baseClass && typeof(prop[name]) === "function" &&
typeof(F.prototype[name]) === "function") { // 重定义函数name -
// 首先在函数上下文设置this.base指向父类原型中的同名函数
// 然后调用函数prop[name],返回函数结果
// 注意:这里的自执行函数创建了一个上下文,这个上下文返回另一个函数,
// 此函数中可以应用此上下文中的变量,这就是闭包(Closure)。
// 这是JavaScript框架开发中常用的技巧。 F.prototype[name] = (function(name, fn) {
return function() {
this.base = baseClass.prototype[name];
return fn.apply(this, arguments);
};
})(name, prop[name]); } else {
F.prototype[name] = prop[name];
}
}
}
return F;
}; var Person = jClass({ init: function(name) {
this.name = name;
}, getName: function() {
return this.name; } }); var Employee = jClass(Person, { init: function(name, employeeID) {
this.base(name);
this.employeeID = employeeID;
}, getEmployeeID: function() {
return this.employeeID;
}, getName: function() {
return "Employee name: " + this.base();
} });

//---------------------------------------------------------- var zhang = new Employee("ZhangSan", "1234"); console.log(zhang.getName()); // "Employee name: ZhangSan"

这与我上次写的mini-extend.js相比,它的特点在于可以在子类中访问父类中的同名方法,其它并没有太多区别。关于上述代码,如果有任何疑问,欢迎与我一同探讨!

javascript模拟继承的更多相关文章

  1. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  2. javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

  3. Javascript原型继承容易忽略的错误

    编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象 ...

  4. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  5. JavaScript 的继承与多态

    本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及优缺点讨论.最后介绍了javascript面向对象编程中很少被涉及的“多态”,并提供了 ...

  6. JavaScript(7)--- 继承

    JavaScript(7)--- 继承 概念 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承,继承也是为了数据共享. 之间有讲过j ...

  7. 详解Javascript的继承实现(二)

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  8. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  9. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

随机推荐

  1. VMware创建Linux虚拟机并安装CentOS(一)

    在VMware中新建虚拟机,在新建虚拟机向导中,选择“自定义(高级)”选项,鼠标单击“继续”按钮 选择VMware的版本workstation9.0(VMware版本对硬盘.内存.cpu等硬件的支持大 ...

  2. mac安装虚拟机

    1. 安装VirtualBox 2. 新建,按照步骤一步步选择 3.安装系统镜像 xp_sp3_74070.iso CN_WIN7_SP1_X64_33in1_V1.2.iso 设置磁盘分区等 4.V ...

  3. jsfl调整笔刷的笔触和颜色

    今天在用jsfl写脚本以简化对fla资源的处理工作,在画矩形时需要能自动调整笔刷的笔触颜色,填充颜色透明度,查jsfl文档无果,上网查了多番资料写出了可用代码,共享下: var fill = fl.g ...

  4. Odoo PDF 取消Header后 空白处理

    处理方法是 设置纸张格式中的上边距 ,调整位合适的位置.效果如下图:

  5. php下载中文名文件

    $path = APPPATH . '../htdocs/download/corp/商标申请委托书模版.doc';$filename = '商标申请委托书模版.doc';header("C ...

  6. 我的emacs配置

    我的emacs配置文件 ;; .emacs ;; ============================== Basic Configure START ====================== ...

  7. AJAX回调函数,返回JSON格式,应该返回自定义状态STATUS,但是却返回200

    返回200应该是方法已经执行通的意思,但是没返回自定义的status,仔细一看json格式拼错了...

  8. final 140字评论

    按照演讲顺序 1.约跑app         个人感觉约跑现在做的已经很不错了,要是能添加地图就更好了. 2.礼物挑选         给人感觉在一定的时间做到这个程度,很不错很好,讲的声音有点小. ...

  9. Web Api 与 Andriod 接口对接开发经验

    最近一直急着在负责弄Asp.Net Web Api 与 Andriod 接口开发的对接工作! 刚听说要用Asp.Net Web Api去跟 Andriod 那端做接口对接工作,自己也是第一次接触Web ...

  10. 2013年度IT博客大赛跻身10强

    2013年12月26日,由51CTO独家举办的2013年度IT博客大赛圆满落幕,荣幸跻身10强[http://fellow.51cto.com/art/201312/425528.htm],首先感谢各 ...