JavaScript 新語法詳解:Class 的私有屬性與私有方法

proposal-class-fieldsproposal-private-methods定義了 Class 的私有屬性以及私有方法,這 2 個提案已經處於 Stage 3,這就意味着它們已經基本確定下來了,等待被加入到新的 ECMAScript 版本中。事實上,最新的 Chrome 已經支持了 Class 私有屬性。

那麼,對於 Class 的私有屬性與私有方法,它們究竟是什麼呢?它們是怎樣工作的?爲什麼要使用#符號來定義呢?

Class 的私有屬性語法如下:

class Point {
    #x;
    #y;

    constructor(x, y) {
        this.#x = x;
        this.#y = y;
    }

    equals(point) {
        return this.#x === point.#x && this.#y === point.#y;
    }
}

我們可以將其語法理解爲 2 個部分:

  • 定義 Class 私有屬性
  • 引用 Class 私有屬性

定義 Class 私有屬性

私有屬性與公共屬性的定義方式幾乎是一樣的,只是需要在屬性名稱前面添加#符號:

class Foo {
    publicFieldName = 1;
    #privateFieldName = 2;
}

定義私有屬性的時候也可以不用賦值:

class Foo {
    #privateFieldName;
}

引用 Class 私有屬性

引用私有屬性也只需要使用#就好了。

class Foo {
    publicFieldName = 1;
    #privateFieldName = 2;
    add() {
        return this.publicFieldName + this.#privateFieldName;
    }
}

其中,this.#可以簡化,去掉 this 也沒問題,下面兩種寫法是等價的:

method() {
  #privateFieldName;
}
method() {
  this.#privateFieldName;
}

在 Class 定義中引用 Class 實例的私有屬性

對於私有屬性,我們是不可以直接通過 Class 實例來引用的,這也是私有屬性的本來含義。但是有一種情況除外,在 Class 定義中,我們可以引用 Class 實例的私有屬性:

class Foo {
    #privateValue = 42;
    static getPrivateValue(foo) {
        return foo.#privateValue;
    }
}

Foo.getPrivateValue(new Foo()); // >> 42

其中,fooFoo的實例,在 Class 定義中,我們可以通過 foo 來引用私有屬性#privateValue

Class 的私有方法

Class 的私有屬性是提案proposal-class-fields的一部分,這個提案只關注 Class 的屬性,它並沒有對 Class 的方法進行任何修改。而 Class 的私有方法是提案proposal-class-fields的一部分。

Class 的私有方法語法如下:

class Foo {
    constructor() {
        this.#method();
    }
    #method() {
        // ...
    }
}

我們也可以將函數賦值給私有屬性:

class Foo {
    constructor() {
        this.#method();
    }

    #method = () => {
        // ...
    };
}

封裝(隱藏)私有屬性

我們不能直接通過 Class 實例引用私有屬性,我們只能在 Class 定義中引用它們:

class Foo {
  #bar;
  method() {
    this.#bar; // Works
  }
}
let foo = new Foo();
foo.#bar; // Invalid!

另外,要做到真正的私有的話,我們應該無法檢測這個私有屬性是否存在,因此,我們需要允許定義同名的公共屬性:

class Foo {
    bar = 1; // public bar
    #bar = 2; // private bar
}

如果我們不允許公共屬性與私有屬性同名,我們則可以通過給同名的公共屬性複製監測該私有屬性是否存在:

foo.bar = 1; // Error: `bar` is private! (報錯,說明私有屬性存在)

不報錯也行:

foo.bar = 1;
foo.bar; // `undefined` (賦值失敗,說明私有屬性存在)

對於 subclass 應該同樣如此,它也允許公共屬性與私有屬性同名:

class Foo {
    #fieldName = 1;
}

class Bar extends Foo {
    fieldName = 2; // Works!
}

關於 Class 私有屬性的封裝,可以參考Why is encapsulation a goal of this proposal?

爲什麼使用#符號?

很多人都有一個疑問,爲什麼 JS 不能學習其他語言,使用private來定義私有屬性和私有方法?爲什麼要使用奇怪的#符號?

使用 private 的話,代碼要舒服很多:

class Foo {
  private value;

  equals(foo) {
    return this.value === foo.value;
  }
}

爲什麼不使用 private 來定義私有屬性?

很多語言使用 private 來定義私用屬性,如下:

class EnterpriseFoo {
  public bar;
  private baz;
  method() {
    this.bar;
    this.baz;
  }
}

對於這些語言屬性,私用屬性和公共屬性的引用方式是相同的,因此他們可以使用 private 來定義私有屬性。

但是,對於 JavaScript 來說,我們不能使用 this.field 來引用私有屬性(我接下來會解釋原因),我們需要在語法層面上區分私有屬性和公共屬性。在定義和引用私有屬性的時候,使用#符號,私有屬性與公共屬性可以很好地區分開來。

爲什麼引用私有屬性的時候需要#符號?

引用私有屬性的時候,我們需要this.#field,而不是this.field,原因如下:

  • 因爲我們需要封裝私有屬性,我們需要允許公共屬性與私有屬性同名,因此私有屬性與公共屬性的引用方式必須不一樣。這一點我們在前文已經詳述。
  • 公共屬性可以通過this.field以及this['field']來引用,但是私有屬性不能支持this['field']這種方式,否則會破壞私有屬性的隱私性,示例如下:
class Dict extends null {
    #data = something_secret;
    add(key, value) {
        this[key] = value;
    }
    get(key) {
        return this[key];
    }
}

new Dict().get("#data"); // 返回私有屬性

因此,私有屬性與公共屬性的引用方式必須不一樣,否則會破壞this['field']語法。

  • 私有屬性與公共屬性的引用方式一樣的話,會導致我們每次都需要去檢查屬性是公共的還是私有的,這會造成嚴重的性能問題。

這篇文章遵循Creative Commons Attribution 4.0 International License

參考

版權聲明

轉載時請註明作者Fundebug以及本文地址:
https://blog.fundebug.com/2019/04/23/javascript-class-private-field-and-private-method/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章