面向对象设计模式 - Javascript 如何实现接口?
黄舟
黄舟 2017-04-10 14:44:43
0
4
397

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

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

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

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

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

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

répondre à tous(4)
PHPzhong

下面有一段在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

PHPzhong
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!');
洪涛

接口是由於靜態語言的緣故才需要的。比如只有 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());
}());
阿神

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!