当前位置:首页 > JavaScript

实现接口js

2026-03-01 12:16:02JavaScript

在 JavaScript 中实现接口

JavaScript 本身没有内置的接口(Interface)概念,但可以通过多种方式模拟接口的行为。以下是几种常见的实现方法:

使用 TypeScript 的接口

TypeScript 是 JavaScript 的超集,直接支持接口语法:

实现接口js

interface MyInterface {
  method1(): void;
  method2(param: string): number;
}

class MyClass implements MyInterface {
  method1() {
    console.log("Method1 called");
  }

  method2(param: string) {
    return param.length;
  }
}

在纯 JavaScript 中模拟接口

可以通过运行时检查来模拟接口行为:

实现接口js

function implementInterface(obj, interfaceDefinition) {
  for (const method in interfaceDefinition) {
    if (typeof obj[method] !== 'function') {
      throw new Error(`Missing implementation for ${method}`);
    }
  }
  return true;
}

const myInterface = {
  method1: function() {},
  method2: function(param) {}
};

class MyClass {
  method1() {
    console.log("Method1 called");
  }

  method2(param) {
    return param.length;
  }
}

implementInterface(new MyClass(), myInterface);

使用鸭子类型

JavaScript 采用鸭子类型(Duck Typing),只需确保对象具有接口要求的方法即可:

function requiresInterface(obj) {
  if (!obj.method1 || !obj.method2) {
    throw new Error("Object doesn't implement required interface");
  }
}

const myObject = {
  method1: () => console.log("Method1"),
  method2: (param) => param.length
};

requiresInterface(myObject);

使用 Symbol 定义接口

通过 Symbol 可以创建唯一的接口标识符:

const MyInterface = Symbol('MyInterface');

function implementInterface(obj) {
  obj[MyInterface] = true;
  return obj;
}

function isImplemented(obj) {
  return !!obj[MyInterface];
}

const myObj = implementInterface({
  method1: () => {}
});

console.log(isImplemented(myObj)); // true

选择哪种方法取决于具体需求。TypeScript 提供了最完整的接口支持,而纯 JavaScript 方案则更灵活但需要手动实现类型检查。

标签: 接口js
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callback) {…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…