一种TypeScript类独特的双重继承模式

一个独特的双重继承模式,允许开发者以两种不同的方式扩展基类:直接继承工厂函数方式。

实现方式

ts 复制代码
// 定义Module接口
interface IModule {
  exampleMethod(): number;
}

// 定义Module构造函数类型
interface ModuleConstructor {
  new (): IModule;
  (): typeof Module;
  prototype: IModule;
}

// 实现Module类
const Module = (function() {
  function Module(this: IModule) {
    if (!new.target) {
      return Module;
    }
  }

  // 添加原型方法
  Module.prototype.exampleMethod = function(this: IModule) {
    // @ts-ignore
    console.log('Method from Module',this.id);
  };

  return Module as unknown as ModuleConstructor;
})();

1. 类型系统设计

typescript 复制代码
interface IModule {
  exampleMethod(): number;
}

interface ModuleConstructor {
  new (): IModule;
  (): typeof Module;
  prototype: IModule;
}
  • IModule接口定义了模块的基本结构
  • ModuleConstructor接口实现了双重构造函数类型,支持两种实例化方式

2. 双重继承机制

Module类通过闭包和原型链操作实现了双重继承:

typescript 复制代码
const Module = (function() {
  function Module(this: IModule) {
    if (!new.target) {
      return Module;
    }
  }
  return Module as unknown as ModuleConstructor;
})();
  • 当使用new关键字时,创建普通实例
  • 当作为函数调用时,返回构造函数本身

重点: new.target 元属性允许你检测函数或构造函数是否是通过 new 运算符被调用的。在通过 new 运算符执行的函数或构造函数中,new.target 返回一个指向 new 调用的构造函数或函数的引用。在普通的函数调用中,new.target 的值是 undefined

使用方式

通过以上方式创建的Module即可以直接继承,也可以工厂方式继承。

1. 直接继承

typescript 复制代码
class MyModule extends Module {
  id = "my"
  test() {
    this.exampleMethod()
  }
}

2. 工厂函数方式

typescript 复制代码
class AnotherModule extends Module() {
  id = "another"
  test() {
    this.exampleMethod()
  }
}
相关推荐
烛阴21 小时前
从`new`关键字开始:精通C#类与对象
前端·c#
天若有情67321 小时前
笑喷!乌鸦哥版demo函数掀桌怒怼主函数:难办?那就别办了!
java·前端·servlet
记得记得就15121 小时前
【Nginx 实战系列(一)—— Web 核心概念、HTTP/HTTPS协议 与 Nginx 安装】
前端·nginx·http
天蓝色的鱼鱼21 小时前
mescroll老用户亲测z-paging:这些功能让我果断切换!
前端·uni-app
JarvanMo21 小时前
适用于 iOS 开发者的 Flutter 3.38:Xcode 与 Swift 集成新技巧
前端
北极糊的狐21 小时前
Vue 中 vue-awesome-swiper的使用笔记(适配 Vue2/Vue3)
前端·javascript·vue.js
anyup21 小时前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
m0_6265352021 小时前
代码分析 长音频分割为短音频
javascript·python·音视频
2***574221 小时前
前端数据可视化应用
前端·信息可视化
xiaoxue..21 小时前
栈的全面解析:ADT、实现与应用
javascript·数据结构·面试