js 函数定义的三种方式以及匿名的自执行函数定义方式和常见的错误写法

函数的定义，大致可分为三种方式：

第一种：这也是最常规的一种

function double(x){    
    return2 * x;       
}

第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。

var double = new Function('x','return 2 * x;');

第三种：

var double = function(x) { return2* x; }

注意“=”右边的函数就是一个匿名函数，创造完毕函数后，又将该函数赋给了变量 double。

匿名函数的创建

     第一种方式：就是上面所讲的定义double函数，这也是最常用的方式之一。

     第二种方式：

(function(x, y){   
    alert(x + y);     
})(2, 3);

     这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。括号是表达式，是表达式就有返回值，所以可以在后面加一对括号让它们执行.

自执行的匿名函数

1. 什么是自执行的匿名函数?
    它是指形如这样的函数: (function {// code})();

    2. 疑问
    为什么(function {// code})();可以被执行, 而function {// code}();却会报错?

    3. 分析
    (1). 首先, 要清楚两者的区别:
    (function {// code})是表达式, function {// code}是函数声明.
    (2). 其次, js"预编译"的特点:
    js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
    (3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
    当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

   另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……

更多匿名自执行方式如下：

方式1，调用函数，得到返回值。强制运算符使函数调用执行

1 2 3 4

( function (x,y){      alert(x+y);      return  x+y; }(3,4));

方式2，调用函数，得到返回值。强制函数直接量执行再返回一个引用，引用再去调用执行

1 2 3 4

( function (x,y){      alert(x+y);      return  x+y; })(3,4);

这种方式也是很多库爱用的调用方式，如 jQuery ， Mootools 。

方式3，使用void

1 2 3 4

void  function (x) {        x = x-1;        alert(x); }(9);

方式4，使用-/+运算符

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

- function (x,y){      alert(x+y);      return  x+y; }(3,4);   + function (x,y){      alert(x+y);      return  x+y; }(3,4);   -- function (x,y){      alert(x+y);      return  x+y; }(3,4);   ++ function (x,y){      alert(x+y);      return  x+y; }(3,4);

方式5，使用波浪符(~)

1 2 3 4

~ function (x, y) {      alert(x+y);     return  x+y; }(3, 4);

方式6，匿名函数执行放在中括号内

1 2 3

[ function (){     console.log( this )  // 浏览器得控制台输出window }( this )]

 

 方式7，匿名函数前加typeof

1 2 3

typeof  function (){     console.log( this )  // 浏览器得控制台输出window }( this )

 

方式8，匿名函数前加delete

1 2 3

delete  function (){     console.log( this )  // 浏览器得控制台输出window }( this )

 

方式9，匿名函数前加void

1 2 3

void  function (){     console.log( this )  // 浏览器得控制台输出window }( this )

 

方式10，使用new方式，传参

1 2 3

new  function (win){     console.log(win)  // window }( this )

  

方式11，使用new，不传参

1 2 3

new  function (){      console.log( this )  // 这里的this就不是window了 }

 

方式12，逗号运算符

1 2 3

1,  function (){      console.log( this )  // window }();

 

方式13，按位异或运算符

1 2 3

1^ function (){      console.log( this )  // window }();

 

方式14，比较运算符

1 2 3

1> function (){      console.log( this )  // window }();

最后看看错误的调用方式

使用匿名函数也要注意经常犯的错误：

//错误写法1
(function f1() {
       alert(5);
    })f1();  //这不是匿名函数了！

//错误写法2
(function () {
        alert(6);
    });  //语法没有错误，没有调用的匿名函数，后面也没有机会调用了，因为没有名字，找不到调用入口。


//错误写法3
function () {
        alert(1);
}();//没有产生函数的引用就调用

//错误写法4
function () {
        alert(1);
};//直接这么写也是错的，语法错误缺少函数名

转载自：

http://www.jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0628/290.html；

http://www.cnblogs.com/snandy/archive/2011/02/28/1966664.html；

http://blog.csdn.net/rishengcsdn/article/details/38680425