ES5 中模拟 ES6 的 Symbol 实现私有成员

livem 发布于2019-08-21 10:38 / 920人阅读

摘要：中有类语法，定义类变得简单了然而，并没有提供私有属性。按照此思路，在中其实也很容易模拟私有成员。问题在于模拟的唯一性。在开发阶段这个值仍然是不可预料的。综上，中模拟来实现私有属性的目的已经达到了。

ES6 中有类语法，定义类变得简单了

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

然而，并没有提供私有属性。比如上面的 Person 其实是希望在构造的时候传入 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;
})();

其实质在于匿名函数中的 Symbol 实例 _name 是局部变量，在外部不可访问。而 Symbol 由于自身的唯一性特点，也没法再造一个相同的出来，所以就模拟出来一个私有成员了。

按照此思路，在 ES5 中其实也很容易模拟私有成员。局部变量是很容易做到的，在函数范围内 let 和 var 是一样的效果。问题在于模拟 Symbol 的唯一性。

ES5 没有 Sybmol，属性名称只可能是一个字符串，如果我们能做到这个字符串不可预料，那么就基本达到目标。要达到不可预期，一个随机数基本上就解决了。

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 的值都会不同，但并不会影响程序的逻辑，外部程序不会出现任何不适。

然而与 Symbol 方案相比，它的问题在于这个 _name 的值不会像 Symbol 一样会隐藏起来，在控制台可以用很多种办法把它找出来——当然在调试阶段这样做也没什么不可以。在开发阶段这个值仍然是不可预料的。

对于单个私有属性的情况，有人会找到私有 Key 的规律，比如上面的私有 Key 就是以 "000." 开始的，遍历对象属性很容易找出来。在多个私有 Key 的情况下，也可以通过一些技术手段来找，比如

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 来实现私有属性的目的已经达到了。

GPU云服务器云服务器 python私有成员无法访问私有成员 javascript私有成员 java私有属性成员

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85924.html

ECMAScript6

摘要：返回布尔值标签模板可以紧跟一个函数名后边，该函数将被调用来处理这个模板字符串。其它情况下返回值为在内部，整数和浮点数使用同样的存储方法，所以和被视为同一个值。简介 ES6目标，让JavaScript变成一个企业级的开发语言，不仅仅限制与前端页面的脚本语言。标准（Standard）：用于定义与其他事物区别的一套规则实现（Implementation）：某个标准的具体实施/真实实...

MSchumi 2019-08-21 10:57 评论0 收藏0
【ES6】更易于继承的类语法

摘要：的类使用熟悉的关键字指定类继承的函数，并且可以通过方法访问父类的构造函数。例如继承一个的类继承了，术语上称为基类，为派生类。例如注意到上例中，不仅是派生类的实例，也是派生类的实例，内建对象继承的实用之处是改变返回对象的类型。和其它面向对象编程语言一样，ES6 正式定义了 class 类以及 extend 继承语法糖，并且支持静态、派生、抽象、迭代、单例等，而且根据 ES6 的新特性衍...

Lionad-Morotar 2019-08-23 12:44 评论0 收藏0
通俗易懂理解ES6 - ES6的变量类型及Iterator

摘要：迭代器在原有的数据结构类型上新增了两种类型，我们在使用的时候还可以通过自由组合的形式使用这些结构类型达到自己想要的数据结构，这就需要一种统一的接口机制供我们调用处理不同的数据结构。引言万丈高楼平地起，欲练此功，必先打好基本功: ) 在了解 ES6 新增的变量类型前，我们必须先知道 JavaScript 在ES6之前，有如下六种基本数据类型：Null、Undefined、Number...

Keven 2019-08-23 17:19 评论0 收藏0
《深入理解ES6》笔记—— JavaScript中的类class（9）

摘要：新建一个类该函数返回一个类的实例给函数传入通过立即调用类构造函数可以创建单例。派生类是指继承自其它类的新类。在构造函数中访问之前要调用，负责初始化。在构造函数中使用通常表示当前的构造函数名。 ES5中的近类结构 ES5以及之前的版本，没有类的概念，但是聪明的JavaScript开发者，为了实现面向对象，创建了特殊的近类结构。 ES5中创建类的方法：新建一个构造函数，定义一个方法并且赋值...

gggggggbong 2019-08-20 18:23 评论0 收藏0