先使用后定义 javascript 函数需要注意的问题

技术 javascript

先使用后定义function

Javascript的一个特性是，函数可以先使用后定义，像这样写是没问题的：

var data = {some: 'things...', };
processData(data);//先调用
function processData(data){//后定义
    console.log(data);
}

原因：解释器在执行js之前会预处理函数定义，使之在整个作用域内（上层函数或全局对象）都可用。

先使用后定义var

var变量也可以先使用后定义。不同的是，变量的作用域提前了，但其赋值语句会留在原位。也就是说，先于定义使用的变量值都是undifined。

console.log(a);//undefined
var a = '123';//定义+赋值
console.log(a);//123

先使用后定义var function

如果把函数定义赋值给一个var变量，先于变量定义调用它的话会怎样？
理解前两点的读者应想到了，由于变量是空，函数调用是会出错的。

var data = {some: 'things...', };
processData(data);//undefined，调用回出错
var processData = function(data){//后定义
    console.log(data);
}

兼容性问题Firefox

基于上面的理解，大家看下面这段代码是否正确：

var data = {some: 'things...', };
if (data){
    processData(data);//先调用
    function processData(data){//后定义
        console.log(data);
    }
}

和之前的相比，只是多了个if条件把函数调用及定义括了起来。
实测结果是，在Chrome和IE下都正常，但在Firefox下函数没被执行。
只能认为是Firefox对函数的预处理没做到位。

总结

javascript 函数先使用后定义的特点，可以使代码的主逻辑集中在前面，实现细节封装在后面的一些局部函数中。但，不要把这样的函数定义在代码块内部，以避开Firefox下的兼容性问题。