ES6中class私有屬性和私有方法

bergwhite 發布于2019-08-21 11:31 / 3488人閱讀

摘要：新增的語法非常帥，但是圍繞這個新的語法糖，在中如何實現靜態屬性私有屬性私有方法的問題，成為了大家探討的話題。私有方法理論上講，私有屬性和私有方法的區別是，私有方法是函數。

ES6新增的class語法非常帥，但是圍繞這個新的語法糖，在class中如何實現靜態屬性、私有屬性、私有方法的問題，成為了大家探討的話題。本文打算繞過現有的weakmap、symbol的方案，從最簡單的實踐中抽取出滿足要求的方案。

靜態屬性

靜態方法非常好實現，就是在普通方法名前面添加static關鍵字。那么靜態屬性呢？其實也可以通過static關鍵字來處理：

class MyClass {
    static get name() {
        return "my name"
    }
}

這樣就可以使用MyClass.name獲取靜態屬性值了。而且因為沒有設置setter，所以這個靜態屬性值還不能被改變。當然，你也可以把setter加上去。

私有屬性

首先要搞明白“私有屬性”意味著幾層意思，不是說形式上滿足需求就可以，而是要從代碼的機理上實現“私有”效果：

1 class內部不同方法間可以使用，因此this要指向實例化對象（必須）
2 不能被外部訪問，因此實例化對象person.name既不能獲得值，也不能設定值，應該返回undefined，甚至應該在實例化之后，并不知道有name這個屬性存在，開發者甚至可以自己再person.name = "new name"動態去創建一個非私有屬性（必須）
3 不能被繼承，因此extends后子類不具備該屬性（必須）
4 方便的調用方式，比如類this._name形式（備選）

上面這些應該是作為私有屬性的主要條件，如果連這些都不滿足，很難談得上叫“私有屬性”。

實現方法：

var attributions = {}
function get(that, key) {
    return attributions[that] && attributions[that][key]
}
function set(that, key, value) {
    if(!attributions[that]) attributions[that] = {}
    attributions[that][key] = value
}

class MyClass {
    set() {
        set(this, "name", "my name")
    }
    get() {
        let name = get(this, "name")
        console.log(name)
    }
}

在類外面有一個輔助對象attributions，兩個輔助函數set, get。它們將不被實例化對象直接訪問，因此是一個相對封閉的空間，外部完全無法訪問set, get函數操作的內容，但對于類的實例化對象而已，確實有自己對應的屬性內容，因此，這種方案，可以代替類內部的私有屬性的功能。

私有方法

理論上講，私有屬性和私有方法的區別是，私有方法是函數。因此，實際上，上面私有屬性的實現過程中已經實現了私有方法，就是上面的set, get兩個輔助函數，這兩個函數幫助類完成一些操作，同時對于每一個實例化對象而言都可以設置對應的值，而且也不會被外部獲取。

getter和setter的實現

現在很多類實現了getter和setter，將內部的數據管理和自身的屬性分開，改變數據和改變屬性是兩回事。

var events = {}
var data = {}
class MyClass {
    on(event, handler) {
        if(!events[event]) events[event] = []
        events[event].push(handler)
    }
    trigger(event, params = []) {
        let evts = events[event]
        if(Array.isArray(evts)) evts.forEach(callback => {
            if(typeof callback === "function") {
                if(Array.isArray(params)) callback.apply(this, params)
                else callback.call(this, params)
            }
        })
    }
    get(key) {
        return data[this] && data[this][key]
    }
    set(key, value, notify = true) {
        if(!data[this]) data[this] = {}
        data[this][key] = value
        if(notify) {
            this.trigger("change:" + key, value)
        }
    }
    call(factory, ...args) {
        factory.apply(this, args)
    }
}

上面的類中定義了我們最常用的on, trigger, get, set, call這幾個方法。使用方法：

var a = new MyClass()
a.on("change:name", value => console.log(value))
a.set("name", "my value")

這樣不僅可以有效的管理組織自己的數據，而且還可以通過綁定，實現數據變化的監聽。

求個兼職，如果您有web開發方面的需要，可以聯系我，生活不容易，且行且珍惜。
我的個人博客 www.tangshuang.net 這里就不留信息了，請在博客留言，我會聯系你

GPU云服務器云服務器 es6中的class 私有屬性 es6class 訪問私有屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86801.html

JavaScript => TypeScript 類入門

摘要：靜態屬性靜態方法目前支持靜態方法表示，類屬性及靜態屬性目前作為提案還未正式成為標準。在中，抽象類不能用來實例化對象，主要做為其它派生類的基類使用。不同于接口，抽象類可以包含成員的實現細節。中也是這樣規定的抽象類不允許直接被實例化。嘗試重寫在此之前，通過《JavaScript => TypeScript 入門》已經掌握了類型聲明的寫法。原以為憑著那一條無往不利的規則，就可以開開心心的...

geekidentity 2019-08-21 17:44 評論0 收藏0
ES6 系列之私有變量的實現

摘要：前言在閱讀入門的時候，零散的看到有私有變量的實現，所以在此總結一篇。構造函數應該只做對象初始化的事情，現在為了實現私有變量，必須包含部分方法的實現，代碼組織上略不清晰。前言在閱讀《ECMAScript 6 入門》的時候，零散的看到有私有變量的實現，所以在此總結一篇。 1. 約定實現 class Example { constructor() { this...

lentoo 2019-08-26 13:24 評論0 收藏0
面向對象特征之封裝-Es6中Class私有和受保護的屬性及方法

摘要：熟悉面向對象編程的都知道，面向對象編程最重要的原則之一從外部接口劃分內部接口。所以，面向對象編程就類似于汽車一樣。熟悉面向對象編程的都知道，面向對象編程最重要的原則之一 - 從外部接口劃分內部接口。也就是說，針對某一類事物，我們其實并不是那么在乎其內部究竟是怎樣去實現的，只關心怎樣使用而已。為了理解這點，讓我們先來看看現實生活中的列子。通常，我們使用的設備非常復雜。但是從外部接口界...

neuSnail 2019-08-26 10:11 評論0 收藏0
ES5 中模擬 ES6 的 Symbol 實現私有成員

摘要：中有類語法，定義類變得簡單了然而，并沒有提供私有屬性。按照此思路，在中其實也很容易模擬私有成員。問題在于模擬的唯一性。在開發階段這個值仍然是不可預料的。綜上，中模擬來實現私有屬性的目的已經達到了。 ES6 中有類語法，定義類變得簡單了 class Person { constructor(name) { this._name = name; } ...

livem 2019-08-21 10:38 評論0 收藏0
ES6的一個基礎類，支持私有屬性和方法，支持event和mix

摘要：綁定事件，傳入一個回調函數，但是這里還給加了一個功能，就是第三個參數規定回調函數執行的順序。比如當你給同一個事件傳入了多個回調函數，怎么來規定它們之間的順序呢通過傳入第三個參數即可，數字越小的，越靠前執行。 ES6提供了完整的class語法，因此，可以非常方便的使用extends關鍵字對類進行擴展（繼承）。為了實現類的一些基礎功能，我撰寫了下面這個類，用以被其他類繼承，擁有這個基礎類的...

Jeffrrey 2019-08-21 11:37 評論0 收藏0