js相关的一个问题,求教

代码如下所示。我的问题是:如果(函数内的)old = 0 改为old,即不赋予初值,则出错,touchmove中的old为undefined。肯定是先执行touchstart,然后执行touchmove。
执行touchstart时old被赋值,alert输出证实了这点,然后执行touchmove时,old应该有值才对,但却居然为undefined。为什么呢?不过倒是有解决方法
解决方法有2个:
(1)为old赋予初值
(2)将old声明提到函数外,成为全局变量

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript">
//var old = 66;
function touchHandler(e){
    var output = document.getElementById("div");
    var old =11;

    switch(e.type){
        case "touchstart":
            old = 88;//alert(old);
            break;
        case "touchend":
            break;
        case "touchmove":
            //alert(old);
            output.innerHTML += old + "<br>";
            break;
    }
}
document.addEventListener("touchstart",touchHandler);
document.addEventListener("touchend",touchHandler);
document.addEventListener("touchmove",touchHandler);
</script>
</head>
<body>
    <div id="div" style="width:300px;height:200px;border:2px solid red;"></div>
</body>
</html> 

var而不是显式类型,
如:var a =1 ;IDE或编译器会根据你给a 的值:1,来"推论,断定"a是一个整数类型.必须在定义时初始化。
old在这里你定义的局部变量,其作用域仅限于函数内

作用域没搞清楚,放函数内容每次都是申明一个新的old变量,touchstart,touchmove,touchend操作的就不是同一个变量