关于一道javascript笔试题

最近看了一道javascript笔试题，很有意思，所以拿出来探讨一番。题目如下：

 

请给出下页面代码的运行结果：
var x = 20;
function fn(){
    function f1(){
        alert(this.x);
    }
    with(
          {
            f2: function(){
                alert(this.x);
            },
            x:50
          }
        )
    {
        function f3(){
            alert(this.x);
        }
         function f4(){
            alert (x);
        }
        f1();
        f2();
        f3();
        f4();
    }
}
fn();

 

 

 

 

 

用于测试的页面源代码：

 

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>一道javascript笔试题</title>
</head>
<body>
<noscript>您的浏览器未开启Javascript!</noscript>
<script type="text/javascript">
    <!--

    /* 注意： 加不加 window.onload 对结果有非常大的影响*/

    //window.onload = function(){
        var x = 20;
        function fn(){
            function f1(){
                alert("f1: " + this.x);
            }
            with ({
                f2: function(){
                    alert("f2: " + this.x);
                },
                x: 50
            }) {
                function f3(){
                    alert("f3: " + this.x);
                }
                function f4(){
                    alert("f4: " + x);
                }
                f1();//
                f2();//
                f3();//
                f4();//
            }
        }
        fn();
    //}
    -->
</script>
</body>
</html>

 

 

 

 

 

在我的机器上，Firefox的运行结果：

 

f1: 20
f2: 50
f3: 20
f4: 50

 

ie, chrome, safari, opera 的运行结果：

 

f1: 20
f2: 50
f3: 20
f4: 20

 

结果f4的结果是不一样的，应该是javascript引擎处理的方式所造成的。

 

 

为了写出更健壮安全javascript的代码，我们可以注意什么呢？个人认为老掉牙的调调还是很实用的：

 

1. 程序要简洁清晰（无论是程序逻辑上，还是代码的风格上）。

2. 程序要可读性好，不要编写太过技巧性的代码（个人认为，这个程序可读性不太好）。

3. 对代码进行全面的测试。