Question

这对我来说有点陌生，我可能没有正确理解它。这就是我所拥有的：

var imgModule = (function() {
    var imgLocations = {};
    var images = [];
    imgLocations.setImage = function(img, location) {
        imgLocations[img] = location;
    }
    imgLocations.getImg = function(img) {
        return imgLocations[img];
    }
    imgLocations.setImageArray = function(img) {
        images.push(img);
    }
    imgLocations.getImageArray = function() {
        return images;
    }
    return imgLocations;
}());

我希望能够从此函数外部访问imgLocations对象和图像数组。设置功能有效，但

document.getElementById("but").onclick = function() {
    console.log(imgModule.imgLocations.getImageArray());
    console.log(imgModule.imgLocations.getImg(imgName));
}

返回＆＃34; undefined＆＃34;。我如何访问这些变量？我该如何改进这个功能？请耐心等待我并解释我做错了什么:)我试图以正确的方式学习它，而不是在所有函数之外定义一个全局变量。

Answer 1

这不起作用的原因是因为您的imgModule正在返回imgLocations对象。在这种情况下，imgModule实际上将是imgLocations对象。所以你可以这样访问你的方法：

imgModule.setImage()
imgModule.getImg()
imgModule.getImageArray()
imgModule.setImageArray()

正如@gillesc所说。如果您想保留imgModule.imgLocations.getImg()的当前语法，那么您可以像这样返回imgLocations

return {
    imgLocations: imgLocations
}

这样做可以让您为模块添加更多功能

return {
    imgLocations: imgLocations,
    otherObject: otherObject
}
...
imgModule.otherObject.someFunctionCall();

Answer 2

问题是您要返回创建的对象，而不是将其设置为对象的属性。

所以在你的情况下，这就是它的工作方式。

document.getElementById("but").onclick = function() {
    console.log(imgModule.getImageArray());
    console.log(imgModule.getImg(imgName));
}

您需要做的就是像这样返回

return {
    imgLocations: imgLocations
}

如果您想要创建的API，并且仍然可以访问当前无法执行的数组。

Answer 3

您无法访问imgModule.imgLocations，因为您返回的是imgLocations，您应该以下列方式访问它们：

document.getElementById("but").onclick = function() {
    console.log(imgModule.getImageArray());
    console.log(imgModule.getImg(imgName));
}

Answer 4

您似乎尝试编写模块模式。为了深刻理解，我建议您阅读以下文章： The Module Pattern, by Addy Osmani

并注意计数器的例子：

var testModule = (function () {

  var counter = 0;

  return {

    incrementCounter: function () {
      return counter++;
    },

    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };

})();

// Usage:

// Increment our counter
testModule.incrementCounter();

// Check the counter value and reset
// Outputs: counter value prior to reset: 1
testModule.resetCounter();

Javascript访问模块化函数中定义的对象和数组

4 个答案: