Javascript 如何实现接口？

Question

最近在学习 JS 的面向对象实现，看「Javascript 设计模式」看不明白 JS 关于接口是怎么实现的。

比如有一个方法是这样的：

var say = function(){
  alert("Hello");
}

有三个类，分别是 People、Dog、Alien，其中 People 和 Alien 都可以 say()，那么如何用 JS 去实现这个接口呢？

Ps：也不知道我对于「接口」的理解是否正确，我的理解是多个类同时都会用到的公共方法，如有错误请指正……

Answer 1

下面有一段在JS中使用接口的代码，不知道是不是你在《JavaScript设计模式》中看到的，该段代码模拟了接口，支持多个接口的情况。

// Constructor.
var Interface = function (name, methods) {
        if (arguments.length != 2) {
            throw new Error("Interface constructor called with " + arguments.length + "arguments, but expected exactly 2.");
        }
        this.name = name;
        this.methods = [];
        for (var i = 0, len = methods.length; i < len; i++) {
            if (typeof methods[i] !== 'string') {
                throw new Error("Interface constructor expects method names to be " + "passed in as a string.");
            }
            this.methods.push(methods[i]);
        }
    };
 
 
// Static class method.
Interface.ensureImplements = function (object) {
    if (arguments.length < 2) {
        throw new Error("Function Interface.ensureImplements called with " + arguments.length + "arguments, but expected at least 2.");
    }
    for (var i = 1, len = arguments.length; i < len; i++) {
        var interface = arguments[i];
        if (interface.constructor !== Interface) {
            throw new Error("Function Interface.ensureImplements expects arguments" + "two and above to be instances of Interface.");
        }
        for (var j = 0, methodsLen = interface.methods.length; j < methodsLen; j++) {
            var method = interface.methods[j];
            if (!object[method] || typeof object[method] !== 'function') {
                throw new Error("Function Interface.ensureImplements: object " + "does not implement the " + interface.name + " interface. Method " + method + " was not found.");
            }
        }
    }
};

摘自

使用方法

//定义了一个USB接口
var USB = new Interface('USB', ['read', 'write']);

//FlashDisk类，需要实现USB接口
function FlashDisk() {
}

FlashDisk.prototype.read = function () {
};

FlashDisk.prototype.write = function () {
};

//MP3类，同样需要实现USB接口
function MP3() {
}

MP3.prototype.read = function () {
};

MP3.prototype.write = function () {
};

//没有实现USB接口或没有全部实现
function BadDevice() {
}

BadDevice.prototype.write = function () {
};

//没有实现该接口
/*BadDevice.prototype.read = function () {
}*/

//USB设备管理类
function USBManager() {
  this.devices = [];
}

USBManager.prototype.add = function (device) {
  Interface.ensureImplements(device, USB); //确保添加的设备实现了USB接口，没有实现的话会抛出异常

  this.devices.push(device);
};

var disk = new FlashDisk();
var mp3 = new MP3();
var bad = new BadDevice();

var manager = new USBManager();

manager.add(disk);
manager.add(mp3);

manager.add(bad); //此处会抛出异常

Demo

Answer 2

function people() {
    this.name = arguments[0]||'';
    people.prototype.say = function(something) {
        alert(something||'hello')
    }
}

var alien = new people('alien');
alien.say('I can say!');
people.prototype.say('I can say too!');

Answer 3

接口是由於靜態語言的緣故才需要的。比如只有 sayable 的，纔可以調用 say，這在編譯時就可以檢查。

而 js 是動態語言。

其實你在 js 中完全可以拋棄傳統面向對象語言當中的詞彙和思路。

面向對象可以不需要類，不需要接口，不需要繼承。。。

面向對象只是一種對事物本質的抽象。

而 js 實現這種抽象使用的語言，叫做原型。

(function() {
    "use strict";

    var Obj = function() {
        function Obj(name) {
            this.name = name;
        }

        Obj.prototype = Object.create(null);
        Obj.prototype.constructor = Obj;

        Obj.prototype.toString = function() {
            return Object.getPrototypeOf(this).name;
        };

        return Obj;
    }();

    var Person = function() {
        function Person(name) {
            this.name = name;
        }

        Person.prototype = new Obj("Person");
        Person.prototype.constructor = Person;

        Person.prototype.greeting = function() {
            return "Hello, my name is " + this.name + ". ";
        };

        return Person;
    }();

    var Programmer = function() {
        function Programmer(name) {
            this.name = name;
        }

        Programmer.prototype = new Person("Programmer");
        Programmer.prototype.constructor = Programmer;

        Programmer.prototype.toString = function () { return Obj.prototype.toString.call(this) + " (Coder)"; }

        Programmer.prototype.greeting = function() {
            return "Hello, my name is " + this.name + ". " + "I'm a " + this + ". ";
        };

        return Programmer;
    }();

    var p = new Person("Robert"), q = new Programmer("James");

    console.log(p.greeting());
    console.log(q.greeting());
}());

Answer 4

你这个不叫接口，接口是实现声明和约束
你这个更靠近继承和多态