本文實例講述了ES5 模擬 ES6 的 Symbol 實現(xiàn)私有成員功能。分享給大家供大家參考，具體如下：

ES6 中有類語法，定義類變得簡單了

class Person {
  constructor(name) {
    this._name = name;
  }
  
  get name() {
    return this._name;
  }
}

然而，并沒有提供私有屬性。比如上面的 Person 其實是希望在構(gòu)造的時候傳入 name，之后不允許修改了。不過，由于沒有私有屬性，所以難免有人會這樣干：

Person james = new Person("James");
james._name = "Tom";    // God Save Me

不過，如果想定義私有成員，也有變通的方式，比如廣為留傳的 Symbol 大法

var Person = (function() {
  let _name = Symbol();
  class Person {
    constructor(name) {
      this[_name] = name;
    }
    
    get name() {
      return this[_name];
    }
  }
  return Person;
})();

其實質(zhì)在于匿名函數(shù)中的 Symbol 實例 _name 是局部變量，在外部不可訪問。而 Symbol 由于自身的唯一性特點，也沒法再造一個相同的出來，所以就模擬出來一個私有成員了。

按照此思路，在 ES5 中其實也很容易模擬私有成員。局部變量是很容易做到的，在函數(shù)范圍內(nèi) let 和 var 是一樣的效果。問題在于模擬 Symbol 的唯一性。

ES5 沒有 Sybmol，屬性名稱只可能是一個字符串，如果我們能做到這個字符串不可預料，那么就基本達到目標。要達到不可預期，一個隨機數(shù)基本上就解決了。

var Person = (function() {
  var _name = "00" + Math.random();
  function Person(name) {
    this[_name] = name;
  }
  
  Object.defineProperty(Person.prototype, "name", {
    get: function() {
      return this[_name];
    }
  });

  return Person;
})();

如果這個程序在 Web 頁面中加載，那么每次刷新頁面 _name 的值都會不同，但并不會影響程序的邏輯，外部程序不會出現(xiàn)任何不適。

然而與 Symbol 方案相比，它的問題在于這個 _name 的值不會像 Symbol 一樣會隱藏起來，在控制臺可以用很多種辦法把它找出來——當然在調(diào)試階段這樣做也沒什么不可以。在開發(fā)階段這個值仍然是不可預料的。

對于單個私有屬性的情況，有人會找到私有 Key 的規(guī)律，比如上面的私有 Key 就是以 "000." 開始的，遍歷對象屬性很容易找出來。在多個私有 Key 的情況下，也可以通過一些技術(shù)手段來找，比如

function getPersonNameKey() {
  var v = "" + Math.random();
  var p = new Person(v);
  for (var k in p) {
    if (p[k] === v) {
      return k;
    }
  }
}

但這些都是后話，做起來太費勁，一般人不會這么干。何況 Symbol 也是可以遍歷的（通過 Object.getOwnPropertySymbols()），完全可以以同樣的方法來獲取私有 Key。

綜上，ES5 中模擬 Symbol 來實現(xiàn)私有屬性的目的已經(jīng)達到了。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論