尝试理解一些js代码中的执行顺序。

Question

<script type="text/javascript"> 
var DYN_WEB = DYN_WEB || {};
DYN_WEB.Util = (function( Ut ) {
    Ut.getResult = function ( cl, tag, el ) {
    console.log(arguments)
    }
return Ut;
})( DYN_WEB.Util || {} );
var links = DYN_WEB.Util.getResult('show-hide');
</script>  

在chrome->控制台中，它显示：["show-hide"]

问题：

当脚本转到下面这一行时：DYN_WEB.Util，尚未到达var links，为什么console.log(arguments)仍然可以输出["show-hide"]，而不是undefined

Answer 1

如果您想了解执行流程，可以添加一些额外的行。在links行上调用getResult函数。试试this

var DYN_WEB = DYN_WEB || {};
DYN_WEB.Util = (function (Ut) {
    Ut.getResult = function (cl, tag, el) {
        console.log(arguments)
    }
    return Ut;
})(DYN_WEB.Util || {});
console.log("before links");
var links = DYN_WEB.Util.getResult('show-hide');
console.log("after links");

控制台输出将为：

before links
["show-hide"]
after links 

Answer 2

DYN_WEB.Util是一个函数，不会自己执行。因此，在它无法到达变量链接的点上，您是错误的。

首先，它将到达调用DYN_WEB.Util函数的var links，并传递您正在使用的参数。

因此，调用流程将首先调用var links，在此调用上面初始化的DYN_WEB.Util函数，然后执行console.log。

然后输出show-hide。