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

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

  1. function test(){...}
  2. 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自带的编辑器,太难用了,会“聪明”地把段前空格吃掉,导致代码缩进很难看。目前我是切换到源码状态进行编辑的,有更好的办法吗?

标签: js, 作用域, 函数定义, 区别

添加新评论