关于JavaScript中立即执行函数的理解

页面导航:首页 > 网络编程 > JavaScript > 关于JavaScript中立即执行函数的理解

关于JavaScript中立即执行函数的理解

来源: 作者: 时间:2016-01-23 10:23 【

关于JavaScript中立即执行函数的理解JavaScript中常见的两种立即执行函数的书写格式是:① (function(){ })();② (function(){ }());两者格式上的区别在前者两个()是相对独立的,后者的两个

关于JavaScript中立即执行函数的理解

JavaScript中常见的两种立即执行函数的书写格式是:

① (function(){...})();

② (function(){...}());

两者格式上的区别在前者两个'()'是相对独立的,后者的两个'()'是嵌套类型的。翻看jQuery时可以看见jQuery采用的是第二种格式。格式上的区别并不能说明什么东西,只不过是大家自己的书写习惯而已啦!不必过多纠结,接下来看看一些更加深入的东西,以帮助我们理解Script的立即执行函数。

插播:中函数的声明方式

JavaScript中函数的定义方式主要分为如下三种:

① 函数声明: function func(parameters){...};

② 函数表达式: var func = function(parameters){...};

③ 匿名函数: function(parameters){...}; // 匿名函数有时候也叫做拉姆达函数

严格意义上来讲,匿名函数也属于函数表达式的范畴。也即是,JavaScript中函数定义的两种方式分别是:函数声明和函数表达式;

要理解两者间的区别,主要还是要从JavaScript的解释器(执行引擎)的机制来说起。

关于函数声明,其主要的一个特征就是函数声明提升(function declaration hoisting),意思是:解释器在执行函数代码之前会先读取函数的名字。这就是说,即使我们在函数声明的地方之前调用该函数,也不会报错。例如:

func();   // 这里并不会报错

function func(){  // 函数声明提升,JavaScript执行引擎在代码编译阶段会先读取函数名,并保存在当前的执行环境中(作用域链)
   console.log('函数声明...');
}
关于函数表达式,我们可以将其看做是变量声明。我们声明了一个匿名函数,让后将这个匿名函数赋值给一个变量。JavaScript中所有变量在使用前都必须要先赋值!函数表达式也必须要先赋值后使用。例如:
func (); // 报错 TypeError: undefined is not a function

var func = function(){  // 函数表达式
    console.log('函数表达式、、、');
}
这样的话就不会报错了:
 var  func = function(){alert();};
        
 func();  // 先赋值后使用

 

 

关于立即执行函数

前面插播了那么多JavaScript中关于函数的声明的东东,现在开始来解释一下关于立即执行函数的问题了。

 

前面提到JavaScript中函数的定义主要有函数声明和函数表达式两种,并提到了它们两种的一些区别。它们两者间其实除了上面提到的区别之外,主要的区别还有在函数立即执行上的不同:函数表达式后面加上括号可以立即调用该函数,但是函数声明不可以,函数声明只能是以函数名后面跟'()'的方式进行调用

 

/* 函数声明  */

function func(){
    alert('func');
}

func();

function func1(){   // 报错: ' SyntaxError: Unexpected token ) '  语法级错误
    alert('func1');
}();


/*  函数表达式 */

var func2 = function(){ // 函数表达式在函数体后面添加括号后会立即调用,此时func2的值不是函数的地址,而是 1
    return 1;
}();

console.log(func2);  // 输出结果为 1

func2();  // 报错  TypeError: number is not a function

 

为了进一步理解立即执行函数,我们来做几个有趣的实验:

 

(function(param){
    console.log(param);   //输出123,使用()运算符
})(123);
 
(function(param){
    console.log(param);   //输出1234,使用()运算符
}(1234));
 
!function(param){
    console.log(param);   //输出12345,使用!运算符
}(12345);
 
+function(param){
    console.log(param);   //输出123456,使用+运算符
}(123456);
 
-function(param){
    console.log(param);   //输出1234567,使用-运算符
}(1234567);
 
var func = function(param){
    console.log(param);   //输出12345678,使用=运算符
}(12345678)

通过实验结果我们可以得到如下结论:

 

在function前面加'!'、'+'、 '-'甚至是','等到都可以起到函数定义后立即执行的效果,而'()'、'!'、'+'、'-'、'='等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。加括号是最安全的做法,因为!、+、-等都是运算符,运算符会和函数的返回值进行运算,有时造成不必要的麻烦。

立即执行函数的用处

在实际的开发中,我们使用函数表达式的地方很多,除了定义函数外,我们还将其使用与实现一些特别的需求,例如:JavaScript中没有声明私有变量,常量等的关键字,我们可以使用立即执行函数来模拟实现这些特定需求;控制变量作用范围等等。

 


 

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<