测试JS变量的作用域范围

测试JS变量的作用域范围

1. 测试全局变量a与局部变量b的作用域范围

    var  a="a";
    function fn() {
        var b="b";
        alert(a);
        alert(b);
    }
    fn();               //a  //b
    alert(a);           //a
    alert(b);           //undefined

• demo2、全局变量和局部变量同名时

      var a = "a";
    function fn() {
        alert(a);//  注意：Webstorm 提示变量可能未定义
        var a = "b";
        alert(a);
    }

    alert(a);       //a
    fn();           //**undefined**    //b

结论：**在javascript中，全局变量与局部变量同名时，
在函数域中，只能访问局部变量**

• demo3、定义局部变量时,不使用”var”:局部变量自动被定义为全局变量.不推荐这样使用

  function fn() {
        b = "b";
        alert(b);   //b
    }
    alert(b)        //b   这里能得到b的值，所以b即为全局变量

• demo4、改demo2 全局变量与局部变量同名时

  var a = "a";
    function fn() {
        alert(a);//  注意：Webstorm 提示变量可能未定义
        a = "b";
        alert(a);
    }

    alert(a);       //a
    fn();           //a   //b

• demo5提示undefined和报错undefined的区别

 var  a="a";
    function fn() {
        var b="b";
        alert(a);
        alert(b);
    }
    alert(a);
    alert(b);//undefined
    fn();//fn没有输出,因为程序依次执行，上面程序变量未定义（undefined）
//提示：undefined:存在 ,但没有值。 相当于定义了函数但没有初始化值
//报错：undefined:不存在。

• 案例：省市联动操作—全局变量与局部变量的应用

   var select=document.getElementById("city");
    select.onchange=function () {
        var optionVal=select.value;
        switch (optionVal){
            case 'bj':
                var area=document.getElementById("area");
                area.innerHTML="<option>bj1</option><option>bj2</option><option>bj3</option>"
                break;
            case 'sh':
                var area=document.getElementById("area");
                area.innerHTML="<option>sh1</option><option>sh2</option><option>sh3</option>"
                break;
            case 'tj':
                var area=document.getElementById("area");
                area.innerHTML="<option>tj1</option><option>tj2</option><option>tj3</option>"
                break;
            default:
                alert("error");
                break;

优化一下：

 var select=document.getElementById("city");
    var area=document.getElementById("area");
    select.onchange=function () {
        var optionVal=select.value;
        switch (optionVal){
            case 'bj':
                area.innerHTML="<option>bj1</option><option>bj2</option><option>bj3</option>"
                break;
            case 'sh':
                area.innerHTML="<option>sh1</option><option>sh2</option><option>sh3</option>"
                break;
            case 'tj':
                area.innerHTML="<option>tj1</option><option>tj2</option><option>tj3</option>"
                break;
            default:
                alert("error");
                 break;
        }

html页面：

<select name="" id="city">
    <option value="bj">bj</option>
    <option value="sh">sh</option>
    <option value="tj">tj</option>
</select>
<select name="" id="area">
    <option>bj1</option>
    <option>bj2</option>
    <option>bj3</option>
</select>