Bobscript

JS中定义函数的两种方式的区别

JS中定义函数的两种方式的区别

在JS中有两种定义函数的方式，

function test(){...}

var test=function(){...}

这两种方式定义的函数是有区别的。

区别一：调用和声明的顺序

  • function方式定义函数可以先调用，后声明。
  • var 方式定义的函数，不能先调用函数，后声明，只能先声明函数，然后调用。

请看代码：

//aaa();这样调用就会出错
var aaa = function(){
  alert("A");
}
aaa();//这样就不会出错
//先调用后声明，可使用function方式定义
bbb();
function bbb(){
  alert("B");
}

区别二：作用域的区别

说到函数，自然少不了作用域的问题。经过我自己的测试，发现两者的作用域是有很大的区别的，我想通过下面 四个例子进行分析

例子1，使用的是function的方式定义

a=1;
if (a==1){
  function tx(){alert('1')}
}else if(a==2){
  function tx(){alert('2')}
};
tx(); //'2'

想好了继续下面的第二个例子，使用var的方式定义

a=1;
if (a==1){
  var tx=function (){alert('1')}
}else if(a==2){
  var tx=function (){alert('2')}
};
tx(); //'1'

继续第三个例子

function outer(){
  alert('outer');
  function inner(){alert('inner'); };
};
outer(); //'outer'
inner(); //'inner未定义'

最后一个是结合了对象的例子：

var ob={
  xx1:function (){
    function gd(){ alert('gd'); }
  },
  xx2:function (){ gd(); }
  };

var ob2={
  xx1:function (){
    gd =function (){ alert('gd'); }
  },
  xx2:function (){ gd(); }
  };

//ob.xx2();  //'gd'未定义
//ob2.xx2(); //'gd'未定义
ob2.xx1(); //生成一个全局函数gd
ob2.xx2(); //alert('gd')

原理分析：

因为网上没有找到相关的资料，所以下面是个人的测试分析，如有错误请指出。

function方式定义的函数的作用域是当前的环境，这在第3个例子中最明显，所以内部如果用function方式定义，外面是访问不到的。

而使用var方式定义的函数，其实是先生成一个匿名函数，然后定义一个变量指向这个匿名函数，函数作用域决定于这个变量的作用域，比如不加var就是全局了，如果加上var那么就和function方式定义的函数作用域一样了。

这里要说一下例1和例2，例1中后面的函数把前面的函数定义冲掉了，同名函数定义了两次的感觉，js的语法就是这么规定的，后面定义的同名函数取代前面的；而例2中实际上生成了两个匿名函数，然后根据条件让tx指向其中某个函数。

顺便抱怨一个Wordpress自带的编辑器，太难用了，会“聪明”地把段前空格吃掉，导致代码缩进很难看。目前我是切换到源码状态进行编辑的，有更好的办法吗？