javascript - 颠倒代码顺序的报错是iLength is not defined；iLength在1处是有数值，在2处为什么就变成defined

问题描述

问 题

<script>
window.onload=function()
{
    var oPicList=document.getElementById("picList");
    var oCss=document.getElementById("css");
    var aBtns=document.getElementById("btns").getElementsByTagName("li");
    var aLi=null;
    var sLi="";
    var sCss="";
    var iLiw=50;
    var iZindex=0;
    var iNow=0;
    var iLength=oPicList.clientWidth/iLiw;
    console.log(iLength,"1")//--------------------------1处
    oPicList.innerHTML=sLi;
    oCss.innerHTML+=sCss;
    aLi=oPicList.children;
    for(var i=0;i<aBtns.length;i++)
    {
        (function(a){
            aBtns[a].onclick=function()
            {
                for(var i=0;i<aLi.length;i++)
                {
                    aLi[i].style.transition="0.5s "+i*50+"ms";
                    aLi[i].style.WebkitTransform="rotateX(-"+a*90+"deg)";
                }    
                this.className="active";
                aBtns[iNow].className="";
                iNow=a;
            };    
        })(i)
    }
};
    console.log(iLength,"2")//--------------------------2处
    for(var i=0;i<iLength;i++)
    {
        i>iLength/2?iZindex--:iZindex++;
        sLi+='<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
        sCss+="#picList li:nth-of-type("+(i+1)+") a{ background-position:-"+i*iLiw+"px 0;}";
        sCss+="#picList li:nth-of-type("+(i+1)+"){z-index:"+iZindex+"}";
        
    }
</script>

解决方案

iLength属于window.onload函数运用域，1处唯一函数内部，因此可访问，输出为数值。
但是2处，处于全局环境，在onload函数的外部，因此不可访问，输出为undefined。
核心思想是：子作用域可以直接访问父作用域中的变量或方法，而父运用域不能直接访问子作用域中的变量或方法。
建议楼主回去温习下作用域的相关内容：
首推《You don't know js》
次推《Javascript高级程序设计》

这篇关于javascript - 颠倒代码顺序的报错是iLength is not defined；iLength在1处是有数值，在2处为什么就变成defined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！