快捷導(dǎo)航

ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能示例

更新時(shí)間：2020年05月06日 10:38:53 作者：邊城

這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能,結(jié)合實(shí)例形式分析了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下

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

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

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

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

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;
})();

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

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

ES5 沒有 Sybmol，屬性名稱只可能是一個(gè)字符串，如果我們能做到這個(gè)字符串不可預(yù)料，那么就基本達(dá)到目標(biāo)。要達(dá)到不可預(yù)期，一個(gè)隨機(jī)數(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;
})();

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: