IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

JS 常用继承实现方式

小小子,simaopig 2010-07-28 09:31:56 累计浏览 2,425 次
本机暂存

看《JavaScript 设计模式》,关于里面提到的JS继承实现的方式,分为三种,且书中都给出了相关实现。这里也不再做讲解,只求记录一下,因为自己总是有时候会忘记这些东西。

  1. 类式继承,extend
  2. 原型式继承,clone
  3. 掺元类继承,augment

类式继承的实现,这里面很有必要引人注意的是,superclass.prototype.constructor = superclass; 而且实现空实例要省很多资源。

如果还想调用类里面的方法,而非其原型对象的方法,可以使用call函数或者apply函数,这里不再缀述。

function extend(subClass, superClass) {
  var F = function() {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;

        subClass.superclass = superClass.prototype;
        if(superClass.prototype.constructor == Object.prototype.constructor) {
                superClass.prototype.constructor = superClass;
  }
}

原型继承相对看起来可能要晕一些,此种方式继承适用于非函数式对象,字面直接量这种方式的继承实现。因为看函数名就能看出来,实现的是对象的克隆,那么当然最简单的方法就是将对象设置成一个空对象的原型。然后再将这个空对象返回。

function clone(object) {
        function F() {}
        F.prototype = object;
        return new F;
}

掺元类的方式适用于那些子类与父类之间关系不大,只是单纯的想通过子类调用其父类的方法,把有用的方法继承过来。

function augment(receivingClass, givingClass) {
  if(arguments[2]) { // Only give certain methods.
    for(var i = 2, len = arguments.length; i < len; i++) {
      receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
    }  
  }  
  else { // Give all methods.
    for(methodName in givingClass.prototype) {
      if(!receivingClass.prototype[methodName]) {
        receivingClass.prototype[methodName] = givingClass.prototype[methodName];
      }  
    }  
  }
}

同分类推荐文章

  1. 新特性速递:focus()行为新增focusVisible控制 (2026-05-29 16:23:06)
  2. Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()` (2026-05-28 21:00:00)
  3. Revealing Text With CSS letter-spacing (2026-05-27 20:37:33)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,269)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,271)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,814)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,766)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,692)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,251)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,149)
  8. 什么是全栈工程师? (累计阅读 13,951)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,642)
  10. 7 天打造前端性能监控系统 (累计阅读 11,108)