JavaScript立即执行函数

2017-12-21

JavaScript函数定义、立即执行函数

jquery源码框架

1
2
3

(function(window,undefined){
    //jquery..
})(window)

编程常遇到的问题：当你前面写的代码中定义了一个变量，后面又定义了一个同名的变量，结果两个变量的作用各不相同。那么后定义的那个变量就将前面定义的变量给覆盖了，造成代码错误。或者和别人合作，别人定义的同名变量覆盖你的变量。

立即执行函数的作用：类似一个沙箱，构造了一个作用域，将你定义的变量放到这个沙箱中使之成为一个局部变量，从而避免暴露在全局环境下造成全局变量的污染。

定义函数的方式

函数声明

函数名称是函数声明必须的组成部分，这个函数名称相当于一个变量，新定义的函数会赋值给这个变量，以后的函数的调用都需要通过这个变量进行。

1
2
3

function functionName(..){
    //...
}

函数表达式

// 其中一种
var hello = function(){
     //...
}

new Function构造函数

function Handlebytwo(p1,p2){
    this.p1=p1;
    this.p2=p2;
    this.sum=function(){
        return this.p1+this.p2;
    }
}

var test = new Handlebytwo(7,8);
test.sum();

函数声明和函数表达式的区别

函数声明存在声明提前：函数声明语句“被声明”到外部脚本或外部函数作用域的顶部，所以以这种方式声明的函数，可以被在他定义之前出现的代码所调用。即我们所理解的“声明提前”

函数表达式：使用函数表达式赋值的变量必须在函数表达式定义之后才能调用。

立即执行函数

//  最常见的写法
(function(){
    //..
    console.log('hello');
})();

// 下面这种也是
！function(){
    //..
    conosle.log('hello');
}();

理解：立即执行函数的表现形式其实是函数表达式后面加上()。

根据上例分析：

(function(){
    //..
    console.log('hello');
})();

将上面的代码拆成两部分：(function(){//..})和()。根据我们对立即执行函数的理解那么(function(){//..})应当是一个函数表达式。该部分的代码的组成是一个圆括号包裹一个匿名函数，那为什么一个圆括号包裹一个匿名函数怎么就成了一个函数表达式了呢？

函数表达式：函数表达式总是其它JavaScript语句的一部分，比如变量声明等号的右侧：

1	var myFunc = function(){};

又或者是其他函数的参数：

1
2
3

myFunc(function() {
　　 return function(){};
});

或者立即执行函数中第一个圆括号：

1	(function namedFunctionExpression () { })();

再或者被运算符修饰的(第二个圆括号前面部分)：

1	+function(){}()

立即执行函数必须要用括号包裹是因为：javascript解析器需要区分函数声明和函数表达式，如果省略函数外面的括号直接调用下面这种：

// 下面这种写法会报错
function(){
    //..
}()

那么当javascript解析器解析时:由于该段代码是以function关键字开始的，那么解析器会将其当成函数声明来解析，又因为函数声明必须要有函数名称，这里的函数没有函数名称（即不是函数声明），这里就会抛出异常。
而使用圆括号()将其包括是告诉解析器这里是函数表达式不是函数声明。而除了()符号外，+、- 、！、~、=都可以实现该目的。

参考资料一
 参考资料二