社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 正文

私有成员在JavaScript对象中如何嵌入的示例代码(图)

黄舟
发布： 2017-03-11 15:27:53
原创
1488 人浏览过

最近，我开发一个项目 Angular Cloud Data Connector, 帮助Angular开发者使用云数据，特别是 Azure移动服务, 使用WEB标准，像索引数据库(indexed DB)。我尝试建立一种方式，使得JavaScript开发者能将私有成员嵌入到一个对象中。

我解决这个问题的技术用到了我命名的闭包空间（closure space）。在这篇入门文章中，我要分享的是如何在你的项目中用它，及它对主流浏览器的性能和内存的影响。

在深入学习前，咱们先说下，你为什么需要用到私有成员（private members）， 还有一种替代方式来模拟私有成员。

如果你想点评本文，尽情推(twitter)我: @deltakosh。

1. 为何要用私有成员（Private Members）

当你用JavaScript 创建一个对象时，可以声明值成员（value members）。 如果你打算控制对它们的读/写访问操作，可以如下声明:

var entity = {};

entity._property = "hello world";
Object.defineProperty(entity, "property", {
    get: function () { return this._property; },
    set: function (value) {
        this._property = value;
    },
    enumerable: true,
    configurable: true
});
登录后复制

这样实现，你能完全控制读和写操作。问题在于_property 成员仍然可以直接访问和修改。

这也就是为何我们需要更加稳定可靠的方式，声明私有成员，它智能通过对象的方法来访问。

2. 使用闭包空间（Closure Space）

解决方法是使用闭包空间。每当内部函数 (inner fanction) 访问来自外部函数作用域的变量时，浏览器为你分配一段内存空间。有时很取巧，不过就我们的题目来讲，这算是一个完美的解决方案。

我们在上个代码版本中添加这个特性:
var createProperty = function (obj, prop, currentValue) 
{
    Object.defineProperty(obj, prop, 
    {
            get: function () { return currentValue; },
            set: function (value) {
            currentValue = value;
                    },
                    enumerable: true,
                    configurable: true    });
                    } 
var entity = {}; 
var myVar = "hello world";createProperty(entity, "property", myVar);
登录后复制

示例中，createProperty 函数有一个 currentValue 变量，存在 get 和 set 方法。此变量会保存到 get 和 set 函数的闭包空间中。现在，只有这两个函数能看到和更新 currentValue 变量! 任务完成!

唯一需要警惕 caveat，警告，注意）的是源值 (myVar) 仍可访问。下面给出另一个更健壮的版本（保护 myVar 变量）:

var createProperty = function (obj, prop) {
    var currentValue = obj[prop];
    Object.defineProperty(obj, prop, {
        get: function () { return currentValue; },
        set: function (value) {
            currentValue = value;
        },
        enumerable: true,
        configurable: true
    });
}

var entity = {
    property: "hello world"
};

createProperty(entity, "property");
登录后复制

采用该函数, 即便源值都销毁(destructed，注：意思是不能直接赋值)了。到此大功告成了!

3. 性能考虑Performance Considerations

现在咱们看看性能。

很明显，比起一个简单的变量，闭包空间，甚或（对象）属性要慢的多，且更消耗资源。这就是本文更多关注普通方式和闭包空间机制差异的原因。

为证明闭包空间机制并不比标准方式更消耗资源， 我写了下面代码做个基准测试：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<style>
    html {
        font-family: "Helvetica Neue", Helvetica;
    }
</style>
<body>
    <p id="results">Computing...</p>
    <script>
        var results = document.getElementById("results");
        var sampleSize = 1000000;
        var opCounts = 1000000;

        var entities = [];

        setTimeout(function () {
            // Creating entities
            for (var index = 0; index < sampleSize; index++) {
                entities.push({
                    property: "hello world (" + index + ")"
                });
            }

            // Random reads
            var start = new Date().getTime();
            for (index = 0; index < opCounts; index++) {
                var position = Math.floor(Math.random() * entities.length);
                var temp = entities[position].property;
            }
            var end = new Date().getTime();

            results.innerHTML = "<strong>Results:</strong><br>Using member access: <strong>" + (end - start) + "</strong> ms";
        }, 0);

        setTimeout(function () {
            // Closure space =======================================
            var createProperty = function (obj, prop, currentValue) {
                Object.defineProperty(obj, prop, {
                    get: function () { return currentValue; },
                    set: function (value) {
                        currentValue = value;
                    },
                    enumerable: true,
                    configurable: true
                });
            }
            // Adding property and using closure space to save private value
            for (var index = 0; index < sampleSize; index++) {
                var entity = entities[index];

                var currentValue = entity.property;
                createProperty(entity, "property", currentValue);
            }

            // Random reads
            var start = new Date().getTime();
            for (index = 0; index < opCounts; index++) {
                var position = Math.floor(Math.random() * entities.length);
                var temp = entities[position].property;
            }
            var end = new Date().getTime();

            results.innerHTML += "<br>Using closure space: <strong>" + (end - start) + "</strong> ms";
        }, 0);

        setTimeout(function () {
            // Using local member =======================================
            // Adding property and using local member to save private value
            for (var index = 0; index < sampleSize; index++) {
                var entity = entities[index];

                entity._property = entity.property;
                Object.defineProperty(entity, "property", {
                    get: function () { return this._property; },
                    set: function (value) {
                        this._property = value;
                    },
                    enumerable: true,
                    configurable: true
                });
            }

            // Random reads
            var start = new Date().getTime();
            for (index = 0; index < opCounts; index++) {
                var position = Math.floor(Math.random() * entities.length);
                var temp = entities[position].property;
            }
            var end = new Date().getTime();

            results.innerHTML += "<br>Using local member: <strong>" + (end - start) + "</strong> ms";
        }, 0);

    </script>
</body>
</html>
登录后复制

我创建了一百万个对象，都有属性成员。要完成下面三个测试：

  • 执行 1百万次随机访问属性。

  • 执行1百万次随机访问闭包空间实现版本。

  • 执行1百万次随机访问常规get/set实现版本。

测试结果参见下面表格和图表:

JavaScript：如何在对象中嵌入私有成员JavaScript：如何在对象中嵌入私有成员

我们发现，闭包空间实现总是快于常规实现，根据浏览器的不同，还可以做进一步的性能优化。

Chrome 上的性能表现低于预期。或许存在 bug，因此，为确认(存在 bug），我联系了 Google 项目组，描述发生的症状。还有，如果你打算测试在 Microsoft Edge —微软新发布的浏览器，在windows10 中默认安装—中的性能表现，你可以点击下载 。

然而，如果仔细研究，你会发现，使用闭包空间或属性比直接访问变量成员要10倍左右。 因此，使用要恰当且谨慎。

JavaScript：如何在对象中嵌入私有成员

4. 内存占用（Memory Footprint）

我们也得验证该技术不会消耗过多内存。为测试内存占用基准情况，我写了下面代码段：

直接属性引用版本（Reference Code）

var sampleSize = 1000000;
 var entities = []; 
// Creating entities
for (var index = 0; index < sampleSize; index++) {
    entities.push({
            property: "hello world (" + index + ")"
});}
登录后复制

常规方式版本（Regular Way，get/set）

var sampleSize = 1000000;

var entities = [];

// Adding property and using local member to save private value
for (var index = 0; index < sampleSize; index++) {
    var entity = {};

    entity._property = "hello world (" + index + ")";
    Object.defineProperty(entity, "property", {
        get: function () { return this._property; },
        set: function (value) {
            this._property = value;
        },
        enumerable: true,
        configurable: true
    });

    entities.push(entity);
}
登录后复制

闭包空间版本（Closure Space Version）

var sampleSize = 1000000;

var entities = [];

var createProperty = function (obj, prop, currentValue) {
    Object.defineProperty(obj, prop, {
        get: function () { return currentValue; },
        set: function (value) {
            currentValue = value;
        },
        enumerable: true,
        configurable: true
    });
}

// Adding property and using closure space to save private value
for (var index = 0; index < sampleSize; index++) {
    var entity = {};

    var currentValue = "hello world (" + index + ")";
    createProperty(entity, "property", currentValue);

    entities.push(entity);
}
登录后复制

之后，我(在三个主流浏览器上）运行所有的三段代码，启动（浏览器）内嵌的内存性能分析器（本示例中使用 F12 工具条）:

JavaScript：如何在对象中嵌入私有成员

我计算机上运行的结果如下图表：

JavaScript：如何在对象中嵌入私有成员

就闭包空间和常规方式，只有 Chrome上，闭包空间（内存占用）表现稍好，在 IE11 和 Firefox上占用内存反而增多，但是浏览器的比较结果e—对于现代浏览器，用户很可能不会在意这点差别。

更多 JavaScript 实践

或许你会吃惊，微软提供了一批有关开源 Javascript 主题的免费学习材料， 我们正在发起一个任务，关于创建更多 Microsoft Edge 来临 系列。 查看我的文章：

  • 基于 HTML5 和 Babylon.JS 开发 WebGL 3D 基础

  • 构建单页面应用，基于 ASP.NET 和 AngularJS

  • HTML 高级图像技术

或者我们团队系列：

  • HTML/JavaScript 性能优化使用技巧 (该系列有7部分，从响应式设计到休闲游戏的性能优化)

  • 现代 Web 平台快速起步 ( HTML, CSS, and JS基础)

  • 开发通用的 Windows Apps，使用 HTML 和 JavaScript 快速起步 (使用你自己的JS构建app)

以及一些免费工具：Visual Studio 社区，Azure 试用版和跨浏览器测试工具用于 Mac, Linux, 或者 Windows。

结论（Conclusion）

如你所见，对于创建真正的私有数据来讲，闭包空间属性（机制）是一个很棒的做法。或许你得面对内存消耗小幅度增加（问题），但就我的看法，这却很合理 (这个代价可以换取相对于常规方法更高的性能增长)。

随带说一句， 如果你要自己动手试试，所以代码可以在 here下载。 推荐一篇不错的文章， “how-to” on Azure Mobile Services here。

以上是私有成员在JavaScript对象中如何嵌入的示例代码(图)的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
私有成员，JavaScript，对象
来源：php.cn
上一篇：详细介绍JavaScript删除数组重复元素的5个高效算法示例代码 下一篇：详解JavaScript为何会在移动端中胜出？
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
将将类的私有成员设置为构造函数参数 classFoo{#一#二#三#四#五#六#七#八#九#十#十一#十二#十三#十四#十五#六十六构造函数（一，二，三，四，五，六，七，八,九,十,十一,十二,十三,十四,f
来自于 2024-04-06 21:48:47
0
1
637
使用Postman时POST请求正常工作，但使用React axios和Spring Boot后端时不起作用 从反应控制台我收到错误消息“无法加载资源：服务器响应状态为500()”，指向url“:8080/api/review-add”从SpringBoot后端，我收到错误消息“not-n...
来自于 2024-04-05 13:07:01
0
1
396
截取Zoom URL的Cypress测试 我有一个测试用例，最终会重定向到一个Zoom链接。我试图避免浏览器弹出“打开zoom.us”对话框，以便我可以正确地完成测试，并验证浏览器确实尝试打开Zoom链接，而不会挂起浏览器...
来自于 2024-04-04 16:16:37
0
1
340
如何使用javascript更新属性并获取数组对象中连续顺序具有属性值的结果 我有对象数组list，参数rid和rorder被传递。->1.如果rid与列表中的id相同，则用rorder更新itemorder>值。->2.UpdatedLi...
来自于 2024-04-04 13:32:46
0
1
382
如何停止Javascript代码自动将hsl转换为rgb 我有这段代码，我为一个对象分配颜色，然后使用条件来检查该项目是否已被选择。然而，条件不起作用，因为javascript（或浏览器）将hsl转换为rgb，这会阻止任何匹配的发生。我想...
来自于 2024-03-31 16:46:02
0
1
338
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板