JavaScript中实现接口的三种方式详解

作者：栖木时间：2026-10-23 18:37:26浏览：120

本文详细解析JavaScript中实现接口的三种主要方式。首先介绍利用注释进行文档化的简单方法，其次讲解通过属性标记并校验的机制，最后深入探讨基于方法名匹配的鸭式变形法。每种方法均提供具体代码示例与优缺点分析，帮助开发者根据项目规模与规范需求选择合适的接口实现策略。

JavaScript接口实现概述

本文通过具体实例介绍JavaScript中接口的实现方案，供读者参考学习。

在JavaScript中，实现接口主要有以下三种途径：

基于注释的接口实现

第一种方案：基于注释的接口定义

该方法具有以下特征：

（1）实现最为简单，但功能相对有限。

（2）依赖 interface 和 implement 关键字字符串。

（3）通过代码注释的形式展示接口定义与实现关系。

具体实现步骤如下：

1. 通过注释定义接口规范


 /*
  * interface PersonDao(){
  * function add(obj);
  * function remove(obj);
  * function find(id);
  * }
  * */

（2）在实现类中使用注释标明所实现的接口名称。


 /*
  * PersonDaoImp implement PersonDao （PersonDaoImp实现接口PersonDao） 
  * */
  var PersonDaoImp=function () {  };//定义实现类
   //实现
  PersonDaoImp.prototype.add=function(obj){
    //具体代码
  }
  PersonDaoImp.prototype.remove=function(obj){
    //具体代码
  }
  PersonDaoImp.prototype.find=function(id){
    //具体代码
  }

总结：

（1）采用文字描述明确接口与实现类的对应关系。

（2）优点在于具有明确的文档意义，大型项目注重规范与标准，可在编码前充分进行架构设计与思考。

（3）缺点是需要开发者自觉遵守注释中的约定，缺乏强制约束力。

基于属性检验的接口实现

第二种方案：基于属性检验的接口实现。其实质是通过检查特定属性来判断是否实现了指定接口。

具体实现如下：

1. 通过注释定义接口规范


 /*
   * interface PersonDao(){
   * function add(obj);
   * function remove(obj);
   * function find(id);
   * }
   * */

2. 在注释中说明实现关系，并在实现类中添加特定属性。


/*
   * PersonDaoImp implement PersonDao
   * */
  var PersonDaoImp=function () {
    this.implementInterface=["PersonDao"];//告知该类实现的接口是啥是一个数组，
}
  PersonDaoImp.prototype.add=function(obj){
       alert(obj);
  }
  PersonDaoImp.prototype.remove=function(obj){
    //具体实现
  }
  PersonDaoImp.prototype.find=function(id){
    //具体实现
  }

（3）通过代码检查该属性的存在性。


 //接收一个不定参数 可能有多个 使用Object
    function imp1(Object) {
    //遍历传入对象的所用属性 i=1：第一个是不定参数，从第二个参数开始遍历接口，故i=1
      for(var i=1;i<arguments.length;i++){//arguments除Object外
        var interfaceName=arguments[i];
        var interfaceFind=false;
        for(var j=0;j<Object.implementInterface.length;j++){
           if(Object.implementInterface[j]==interfaceName){
             interfaceFind=true;
             break;
           }
        }
        if(!interfaceFind){
          return false;
        }
      }
      return true;
    }

（4）接口定义与实现类配合完成逻辑。


 function addObj(obj) {
    var PersonDao=new PersonDaoImp();
    //开始检查 实现类是否实现接口
      if(!imp1(PersonDao,"PersonDao")){//某对象是否实现接口(对象，接口)  第一次参数是对象，第二个参数是不定参数
        throw new Error("PersonDaoImp没有实现接口PersonDao");
      }else{//实现
        PersonDao.add(obj);
      }
  }

（5）实际调用示例。


addObj("实现");

总结而言，这种方式仅验证了实现类中是否包含与接口名称相同的属性，并未对具体方法的实现情况进行校验。

因此，出现了第三种方案：鸭式变形法，用于严格检验接口中定义的方法是否真正实现。

基于鸭式变形法的接口实现

第三种方案：鸭式变形法（Duck Typing）。这是一种基于形态的命名方式，从实现角度理解：如果对象中包含与接口定义同名的方法，则视为实现了该接口。

具体实现步骤如下：

1. 定义接口类。注意，此处无需使用注释说明，而是通过代码直接定义。


var Interface=function (name,methods) {//name：接口名字
    if(arguments.length<2){
      alert("必须是两个参数")
    }
    this.name=name;
    this.methods=[];//定义一个空数组装载函数名
    for(var i=0;i<methods.length;i++){
      if(typeof methods[i]!="string"){
        alert("函数名必须是字符串类型");
      }else {
        this.methods.push( methods[i]);
      }
    }
  }

2. 定义一个静态方法，用于直接检验接口与实现类之间的匹配关系。

注意，静态方法不应挂载到 Interface.prototype 上，因为那样会写入接口的原型链；我们需要将静态函数直接定义在类层级上。


Interface.ensureImplement=function (object) {
   if(arguments.length<2){
     throw new Error("参数必须不少于2个")
     return false;
   }
   for(var i=1;i<arguments.length;i++){
     var inter=arguments[i];
     //如果是接口就必须是Interface类型
     if(inter.constructor!=Interface){
        throw new Error("如果是接口类的话，就必须是Interface类型");
     }
      //判断接口中的方法是否全部实现
      //遍历函数集合
     for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

       //object[method]是传入的函数
       if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
           throw new Error("实现类中没有完全实现接口中的所有方法")
            }
          }
   }
 }

3. 应用示例

3.1 定义自定义接口

例如：此处定义两个接口规范。


 var FirstInterface=new Interface("FirstInterface",["add","remove","search"]);//第一个接口
 var SecondInterface=new Interface("SecondInterface",["save"]);//第二个接口

3.2 定义实现类


 function commManager() {//实现两个类
    //先实现方法
    this.add=function () {
      alert("ok--实现");
    }
    this.remove=function () {
    }
    this.search=function () {
    }
    this.save=function () {
    }
    //检验
    Interface.ensureImplement(this,GridManager,formManager);
  }

3.3 对实现类进行实例化操作。


var comm=new commManager();
  comm.add();//调用

三种方式对比与总结

总结：上述三种方式各有优劣，开发者应根据实际需求进行选择。但在设计过程中，保持实现类之间的低耦合度至关重要。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章

NestJS 是什么？与 Express、Koa 的核心区别及选型建议

2026-11-05 13:46:41

生产环境升级 Node.js 的注意事项与兼容性测试策略

2026-11-05 09:19:24

nvm 常用命令详解：怎么平滑切换和升级 Node.js 版本

2026-11-04 09:02:34

JavaScript和JSP的根本区别：运行环境与执行机制解析

2026-11-03 23:30:18

使用nvm卸载指定版本Node.js并切换默认环境

2026-11-03 23:09:26