函数声明 + 函数表达式 + 匿名函数
函数声明:使用关键字function声明一个函数,再指定一个函数名
function fnName(){
// code here
}
函数表达式:使用关键字function声明一个函数,但是不指定函数名,将匿名函数赋予一个变量,叫函数表达式
var fnName = function (){
// code here
}
匿名函数:使用关键字function声明一个函数,但是不指定函数名,叫匿名函数
function (){
// code here
}
函数声明提前
JS引擎在解析代码时会对函数声明进行“函数声明提升”(Function declaration Hoisting),而函数表达式则不会提前,必须等到解析到所在行时,才会解析函数表达式:
console.log(fn); // function fn(){ console.log('this is a function')}
function fn() {
console.log('this is a function')
}
console.log(fn); // undefined
var fn = function () {
console.log('this is a function')
}
// 第二个函数相当于:
var fn;
console.log(fn); // undefined
fn = function () {
console.log('this is a function')
}
自执行函数
函数表达式加括号可以立即执行该函数,函数声明不可以
function fnName(){
alert(123)
}() // 报错
var fnName = function () {
alert(123)
}() // 正常执行
要想立即执行,函数必须是函数表达式,不能使函数声明,而在function前面加上!、()、+、-、=等运算符,都可以将函数声明转换成为函数表达式,告诉JS引擎这是一个函数表达式,不是函数声明,所以可以在后面加括号,并且立即执行函数
(function (a) {
alert(a)
})(123)
// 另一种写法
(function (a) {
alert(a)
}(123))
这样写法的作用
用这种写法可以模仿一个私有作用域,用匿名函数作为一个容器,容器内部可以访问外部变量,外部环境不能访问容器内部变量
所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。
var test = 100;
(function (a) {
var x = a + 100;
alert(x)
}(123));
console.log(x)//undefined
JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到保护JQuery内部变量的作用。