ES6里玩接口

OOP里耳胎,class和interface是很有用的兩個東西奖年,廢話细诸。
在JS/ES中,class被prototype取代陋守,而interface則完全沒影震贵。
那么,class和interface到底有什么區(qū)別呢水评?

如果只是將class和interface看做是定義了一套方法的話屏歹,那么class和interface之間的區(qū)別大概只能看做是前者實現(xiàn)了方法(abstract的當(dāng)然就沒實現(xiàn)了),而后者沒實現(xiàn)這套方法了之碗。
所以class可以用作代碼復(fù)用蝙眶,而interface顯然不能。
從這個角度來看的話褪那,兩者的區(qū)別的確不大幽纷。
不過這其實不是重點。
重點在于博敬,從C++時代后開始友浸,class不能多重繼承就(C++里當(dāng)然還是可以的),但interface卻可以多重實現(xiàn)偏窝。
因此收恢,class和interface的區(qū)別就體現(xiàn)了出來:class的作用更多的想是設(shè)計藍(lán)圖,而interface則是不同對象之間互動的協(xié)議祭往。
也就是說伦意,class規(guī)范了object的性質(zhì),而interface規(guī)范了object之間的交互硼补。
interface給出了在一個上下文環(huán)境中一個對象可以提供的服務(wù)驮肉,并且對于超出的部分不予理睬。

好了已骇,明白了這點离钝,就可以來搞一套雖然完全沒什么意義但還是很好玩的ES6的實現(xiàn)了——

其實這套方案ES5里也能玩票编。

var ClassTest;

(function () {
    var id = 0;
    ClassTest = class {
        constructor (name) {
            var _id = id;
            this.name = name;
            Object.defineProperty(this, 'id', {
                configurable: false,
                enumerable: true,
                get: function () {
                    return _id;
                },
                set: function (nouse) {},
            });
            id ++;
            this.value = 0;
        }

        toString () {
            return "I'm " + this.name + ", the " + this.id + "nth child of THE DARK LORD!";
        }

        add (value) {
            this.value += value;
            return this;
        }
        minus (value) {
            this.value -= value;
            return this;
        }
        time (value) {
            this.value *= value;
            return this;
        }
        divide (value) {
            this.value /= value;
            return this;
        }

        Add (value) {
            this.value += value;
            return this.value;
        }
        Minus (value) {
            this.value -= value;
            return this.value;
        }
        Time (value) {
            this.value *= value;
            return this.value;
        }
        Divide (value) {
            this.value /= value;
            return this.value;
        }
    };
})();
var test1 = new ClassTest('Aloha'), test2 = new ClassTest('Kosmos');

class ClassOther {
    constructor () {
        this.name = "MiaoWu~~~";
        this.id = 0;
    }

    toString () {
        return "I'm Nothing...";
    }
}
var other = new ClassOther();

class Interface {
    constructor (kernel, options) {
        options = options || {};
        if (!!options.changable) {
            Object.defineProperty(this, 'kernel', {
                configurable: false,
                enumerable: false,
                writable: true,
                value: kernel,
            });
        }
        else {
            Object.defineProperty(this, 'kernel', {
                configurable: false,
                enumerable: false,
                get: function () {
                    return kernel;
                },
                set: function (nouse) {},
            });
        }
        if (!!options.frozen) {
            Object.freeze(this);
        }
    }

    get value () {
        if (isNaN(this.kernel.value)) return 0;
        else return this.kernel.value;
    }
    set value (nouse) {}
    get description () {
        if (!!this.kernel.toString) return this.kernel.toString();
        else return "EMPTY";
    }
    set description (nouse) {}

    add (value) {
        if (!!this.kernel.add) return this.kernel.add(value);
        else return this;
    }
    minus (value) {
        if (!!this.kernel.minus) return this.kernel.minus(value);
        else return this;
    }
    time (value) {
        if (!!this.kernel.time) return this.kernel.time(value);
        else return this;
    }
    divide (value) {
        if (!!this.kernel.divide) return this.kernel.divide(value);
        else return this;
    }

}

var int1 = new Interface(test1, { changable: true });
var int2 = new Interface(test2, { frozen: true });

在上面的例子中,我們先定義了兩個類(ES6中的類基本可以看做Syntactic Sugar)卵渴,然后構(gòu)造了一個接口慧域。
這個接口的作用非常簡單,就是將真正的數(shù)據(jù)與操作行為分離開浪读,從而操作層的錯誤操作不會影響到真正的數(shù)據(jù)吊趾。
事實上,這里我們完全可以再定義一個接口只實現(xiàn)Add瑟啃、Minus论泛、Time和Divide這四個函數(shù)。
從而我們可以看到蛹屿,通過不同的接口屁奏,我們只能操作特定的方法、訪問特定的屬性错负,且任何在接口上的操作都不會影響到真正的數(shù)據(jù)——除非提供了方法讓你去修改坟瓢。
從而,這個模型就可以實現(xiàn)M與C的隔離犹撒。

其中還提供了兩個參數(shù)折联,一個用來控制接口實例是否可以替換真正的數(shù)據(jù),而另一個則控制接口實例是否可以擁有自己的屬性识颊。

從某種程度來說诚镰,這個Interface就是給一個真正的Data穿上了一件衣服,只露出那些想要露出的祥款,而將那些不想露出的部分遮掩起來清笨。

當(dāng)然啦,最后還是要說:這套方案其實并沒有什么真正的大用處——我直接訪問Interface實例的kernel對象不就好了(當(dāng)然這樣的話一個很雞賊的方式就是直接把所有方法與屬性全部寫在constructor里從而這個Interface沒有prototype從而可以保證你訪問不到kernel)刃跛。
畢竟ES不是OOP抠艾,硬將OOP中的東西弄到ES中很多時候是沒必要的,反而破壞了ES本身Prototype Chain的美好——所以當(dāng)我看到ES6里OOP的味道加重后總是感覺很不適應(yīng)……(大家別理我這枚異端)

最后PS一下:上面所說的方案其實和ES6半毛錢關(guān)系都沒有桨昙,在ES5里都能做到毫無障礙检号,科科。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蛙酪,一起剝皮案震驚了整個濱河市齐苛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌滤否,老刑警劉巖脸狸,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件最仑,死亡現(xiàn)場離奇詭異藐俺,居然都是意外死亡炊甲,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進(jìn)店門欲芹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事厕九∽晕” “怎么了?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵浙宜,是天一觀的道長官辽。 經(jīng)常有香客問我,道長粟瞬,這世上最難降的妖魔是什么同仆? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮裙品,結(jié)果婚禮上俗批,老公的妹妹穿的比我還像新娘。我一直安慰自己市怎,他們只是感情好岁忘,可當(dāng)我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著区匠,像睡著了一般干像。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上驰弄,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天蝠筑,我揣著相機與錄音,去河邊找鬼揩懒。 笑死什乙,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的已球。 我是一名探鬼主播臣镣,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼智亮!你這毒婦竟也來了忆某?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤阔蛉,失蹤者是張志新(化名)和其女友劉穎弃舒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡聋呢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年苗踪,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片削锰。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡通铲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出器贩,到底是詐尸還是另有隱情颅夺,我是刑警寧澤,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布蛹稍,位于F島的核電站吧黄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏唆姐。R本人自食惡果不足惜稚字,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望厦酬。 院中可真熱鬧胆描,春花似錦、人聲如沸仗阅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽减噪。三九已至短绸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間筹裕,已是汗流浹背醋闭。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留朝卒,地道東北人证逻。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像抗斤,于是被迫代替她去往敵國和親囚企。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內(nèi)容