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

我创建了一百万个对象，都有属性成员。

要完成下面三个测试：

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

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

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

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

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

Chrome上的性能表现低于预期。

或许存在bug，因此，为确认（存在bug），我联系了Google项目组，描述发生的症状。

还有，如果你打算测试在 MicrosoftEdge —微软新发布的浏览器，在windows10中默认安装—中的性能表现，你可以点击下载 。

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

 因此，使用要恰当且谨慎。

4. 内存占用（MemoryFootprint）

我们也得验证该技术不会消耗过多内存。

为测试内存占用基准情况，我写了下面代码段：

直接属性引用版本（ReferenceCode）

var sampleSize = 1000000;

 var entities = []; 

// Creating entities

for （var index = 0; index < sampleSize; index++） {

    entities.push（{

            property:

 "hello world （" + index + "）"

}）;}

常规方式版本（RegularWay，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）;

}

闭包空间版本（ClosureSpaceVersion）

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工具条）:

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

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

更多JavaScript实践

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

查看我的文章：

∙基于 HTML5和Babylon.JS 开发WebGL3D基础

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

∙HTML高级图像技术

或者我们团队系列：

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

∙现代Web平台快速起步 （HTML,CSS,and JS基础）

∙开发通用的WindowsApps，使用HTML和JavaScript快速起步 （使用你自己的JS构建app）

以及一些免费工具：

VisualStudio社区，Azure试用版和跨浏览器测试工具用于Mac,Linux,或者Windows。