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

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

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

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

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

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

黄舟
黄舟

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

reply all (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()); }());
        阿神

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

          Latest Downloads
          More>
          Web Effects
          Website Source Code
          Website Materials
          Front End Template
          About us Disclaimer Sitemap
          php.cn:Public welfare online PHP training,Help PHP learners grow quickly!