Javascript：通过 id 检索对象，使用对象，而不是数组答案

【问题标题】：Javascript: retrieve objects by id, using an object, not an arrayJavascript：通过 id 检索对象，使用对象，而不是数组
【发布时间】：2011-10-10 14:10:39
【问题描述】：

我想要一个对象数组来监视（加载）每个 span 元素（使用 XMLHTTPRequest 检索另一个页面上的 URL 并放入相关 span - 我没有在下面包含此功能因为我只对对象数组感兴趣）。

我喜欢以下(Doug Crockford?) snippet 的想法，但我就是无法让它发挥作用。我明白了：

URLLoad.LoadingTxt000003.SetLoadTimeout is not a function

有什么想法吗？

这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<script language="javascript" type="text/javascript">

function URLLoad(id) {
    alert(id);

    return URLLoad[id] = {
        Tagid:id,
        LoadTimeout:0
    }
}

URLLoad.prototype.SetLoadTimeout = function(lt) {
    this.LoadTimeout = lt;
}

URLLoad("LoadingTxt000003");
URLLoad("LoadingTxt000005");

alert(URLLoad.LoadingTxt000003.DelayTimeout + URLLoad.LoadingTxt000005.DelayTimeout);

URLLoad['LoadingTxt000003'].SetLoadTimeout(20); //doesn't work
URLLoad.LoadingTxt000003.SetLoadTimeout(20);    //doesn't work

</script>

</head>

<body>

    <span id="LoadingTxt000003">...</span>
    <span id="LoadingTxt000005">...</span>

</body>
</html>

【问题讨论】：

标签： javascript oop object

【解决方案1】：

为了进行原型继承工作，您需要做两件事：

在创建对象时使用 new 操作符，以获得具有正确原型的this。
```
new URLLoad(...)
```
不从构造函数返回一个值。您返回的值没有正确的原型，但无论如何都有优先级。
```
function URLLoad(){
    this.tagId = ...;
    this.timeOut = ...;
}
```

当然，您现在可能会抱怨我没有进行缓存。嗯，我觉得最好把构造和缓存分开。

var cache = {};
function urlLoad(key){
    if(!cache[key]){ cache[key] = new URLLoad(key); }
    return cache[key];
}

如果您想避免暴露cache 和URLLoad 全局变量，我们可以使用模块模式将它们设为私有：

var urlLoad = (function(){

    function URLLoad(){...};
    URLLoad.prototype = {...};

    var cache = {};
    function urlLoad(){...};

    return urlLoad;
}());

【讨论】：

【解决方案2】：

URLLoad 是一个构造函数。尝试使用 new 运算符为其添加前缀：

new URLLoad("LoadingTxt000003");

【讨论】：

URLLoad("LoadingTxt000003");当我收到警报弹出窗口时会运行构造函数。
构造函数是普通函数，但new 运算符将this 变量绑定到新上下文。应始终使用 new 运算符调用构造函数。
我在 URLLoad("LoadingTxt000003") 和 URLLoad("LoadingTxt000005") 前加上了 new 前缀，但仍然出现同样的错误。

【解决方案3】：

我认为您的解决方案过于复杂。如果您想缓存有关视图的信息，只需使用对象文字并执行

var viewCache = {};

然后添加视图，只需这样做

viewCache['LoadingTxt000003'] = 20;

注意，这里使用视图元素的 id 作为键，超时作为 val，在缓存中。另请注意，尽管[id] 看起来像一个数组索引，但当用于对象字面量时，它只是设置键/值对的一种方式。

你可以通过做类似的事情来扩展它

viewCache['LoadingTxt000003'] = {'timeout': 20};

现在您的缓存是一个对象字面量，它的值也是对象字面量，如果您要在缓存中存储多条信息，这将非常有用。

【讨论】：

我没有尝试缓存视图信息 - 我已经编辑了我的问题以希望澄清。