[关闭]
@TedZhou 2015-07-31T10:00:22.000000Z 字数 905 阅读 313

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

技术 javascript


先使用后定义function

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

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

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

先使用后定义var

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

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

先使用后定义var function

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

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

兼容性问题Firefox

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

  1. var data = {some: 'things...', };
  2. if (data){
  3. processData(data);//先调用
  4. function processData(data){//后定义
  5. console.log(data);
  6. }
  7. }

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

总结

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

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注