Question

我正在使用分配给变量的匿名函数来最小化全局变量的使用。在这个函数中有嵌套函数：一个用于预加载和调整图像大小，另外两个嵌套函数用于导航（下一个和上一个）。下面的代码生成错误，指定匿名函数所分配的变量未定义： 无法读取未定义的属性'preload_and_resize' 如果您发现问题，请告诉我。非常感谢你。

<html>
<head>
<script type="text/javascript">
var runThisCode=(function(){
 var myImages=new Array("img/01.jpg","img/02.jpg","img/03.jpg");
 var imageObj = new Array();
 var index=0;
 var preload_and_resize=function(){
        var i = 0;
        var imageArray = new Array();
        for(i=0; i<myImages.length; i++) {
            imageObj[i] = new Image();
            imageObj[i].src=myImages[i];
        }

    document.pic.style.height=(document.body.clientHeight)*0.95;
};
 var next_image=function(){
    index++;
    if(index<imageObj.length){
        document.pic.src=imageObj[index].src;
    }
    else{
        index=0;
        document.pic.src=imageObj[index].src;
    }
 };
 var prev_image=function(){
    index--;
    if(index>=0){
        document.pic.src=imageObj[index].src;
    }
    else{
        index=myImages.length-1;
        document.pic.src=imageObj[index].src;
    }
 };
})();
</script>
</head>
<body onload="runThisCode.preload_and_resize();">
<div align="center">
<img name="pic" id="pic" src="img/01.jpg"><br />
<a href="JavaScript:runThisCode.prev_image()">Prev</a><a href="JavaScript:runThisCode.next_image()">Next</a>
</div>
</body>
</html>

Answer 1

您的匿名函数不返回任何内容，因此当您运行它时，将返回undefined。这就是runThisCode未定义的原因。无论如何，按照您编写的方式，preload_and_resize将本地，因此无论如何您都无法访问它。

相反，您希望此匿名函数构造对象，并重新。这样的事情应该有用，或至少让你接近：

var runThisCode=(function(){
 var result = {};
 result.myImages=new Array("img/01.jpg","img/02.jpg","img/03.jpg");
 result.imageObj = new Array();
 result.index=0;
 result.preload_and_resize=function(){
        var i = 0;
        var imageArray = new Array();
        for(i=0; i< result.myImages.length; i++) {
            imageObj[i] = new Image();
            imageObj[i].src=myImages[i];
        }

    document.pic.style.height=(document.body.clientHeight)*0.95;
};
 result.next_image=function(){
    index++;
    if(index<imageObj.length){
        document.pic.src=imageObj[index].src;
    }
    else{
        index=0;
        document.pic.src=imageObj[index].src;
    }
 };
 result.prev_image=function(){
    index--;
    if(index>=0){
        document.pic.src=imageObj[index].src;
    }
    else{
        index=myImages.length-1;
        document.pic.src=imageObj[index].src;
    }
 };

 return result;
})();

Answer 2

这可以解释你做错了什么：

var foobar = (function (){
   var priv1, priv2 = 'sum' , etc;
   return {
      pub_function: function() {},
      another: function() {
          console.log('cogito ergo ' + priv2 );
      }
   };

})();

foobar.another();

Answer 3

您已将该函数分配给变量next_image，该变量的作用域是自调用匿名函数。

您分配给runThisCode的值是该匿名函数的返回值，该值（由于没有return语句）为undefined。

要使代码生效，您需要将对象分配给runThisCode并使next_image成为其成员。

将以下内容添加到匿名函数的末尾：

return {
    "next_image": next_image
}

Answer 4

删除匿名函数，并将您的函数设为公共。您只会创建一个全局变量：对象runThisCode。

var runThisCode = function () {
    var myImages = new Array("img/01.jpg", "img/02.jpg", "img/03.jpg");
    var imageObj = new Array();
    var index = 0;
    this.preload_and_resize = function () {
        var i = 0;
        var imageArray = new Array();
        for (i = 0; i < myImages.length; i++) {
            imageObj[i] = new Image();
            imageObj[i].src = myImages[i];
        }

        document.pic.style.height = (document.body.clientHeight) * 0.95;
    };
    this.next_image = function () {
        index++;
        if (index < imageObj.length) {
            document.pic.src = imageObj[index].src;
        } else {
            index = 0;
            document.pic.src = imageObj[index].src;
        }
    };
    this.prev_image = function () {
        index--;
        if (index >= 0) {
            document.pic.src = imageObj[index].src;
        } else {
            index = myImages.length - 1;
            document.pic.src = imageObj[index].src;
        }
    };
};

然后，在您的代码中稍后：

runThisCode.preload_and_resize();

应该有用。

Answer 5

从你在body onload属性中的调用开始，看起来你试图用IIFE（immediately invoked function expression）尝试实现的是返回一个具有方法{{的对象1}}。

正如其他人所指出的那样，你并没有从IIFE返回任何东西，所以真正发生的一切就是你在其自己的命名空间中关闭其中的所有内容，但不是＆＃＆＃＆＃; 34;出口＆＃34;任何东西。

如果你想＆＃34; export＆＃34;这些功能，从你的IIFE，你可能会添加一个看起来像这样的最后一点：

preload_and_resize

基本上创建一个新的JavaScript对象文字，然后将其属性分配给本地范围的函数值。

有些开发人员会发现这种冗余而不是完成这种显式导出可能只是在声明对象文字时定义函数，如：

return { 
    'preload_and_resize': preload_and_resize, 
    'next_image': next_image,
    'prev_image': prev_image
}

未定义分配给匿名函数的变量

5 个答案: