function(){}var fun=function(){}和function fun(){}的区别

Posted fhc1994

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了function(){}var fun=function(){}和function fun(){}的区别相关的知识,希望对你有一定的参考价值。

一、基本定义

1.函数声明:使用function声明函数,并指定函数名。

function fun() {
    // ......   
}

2.函数表达式:使用function声明函数,但未指定函数名,将匿名函数赋予一个变量。

var fun = function() {
    // ......
}

3.匿名函数:使用function声明函数,但未指定函数名。匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

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

二、实例补充

1. 函数声明可在当前作用域下提前调用执行,函数表达式需等执行到该函数后,方可执行,不可提前调用。

fun();
function fun() {
    // ...... 
}
// 正确,函数声明可提前调用
fun()
var fun = function() {
    // ......
} 
// 错误,fun未保存对函数的引用,函数调用需放在函数表达式后面

2.函数表达式可直接在函数后加括号调用。

//传统方法
var fun1 = function() {
    console.log(‘哈哈‘);
}
fun1();

//函数表达式后直接加括号调用            
var fun2 = function() {
    console.log(‘哈哈‘);
}()

3.立即执行函数(function(){})()的第一个小括号必须要加,因为如果不加第一个小括号的话,虽然匿名函数属于函数表达式,但未进行赋值,所以javascript解析时将开头的function当做函数声明,故报错提示需要函数名。加了第一个小括号,意思就是将函数声明转化为函数表达式。

//正确      
(function(){
    console.log(‘哈哈‘);
})();
// 报错
function(){
    console.log(‘哈哈‘);
}();

4.(function(){})()立即执行函数的注意点:在第一对括号内是一个匿名函数,第二个括号会立即调用这个匿名函数的返回值,也就是匿名函数中的内容被立即执行。这个玩意儿的强大之处在于它独立了一个作用域(括号中内容执行完后会被立即回收),内部变量外部无法访问,而它又能通过this保留字,来访问外部变量。好处:内部定义的变量不会跟外部的变量有冲突,达到保护内部变量的作用。

三、JavaScript变量提升的概念

变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

1.变量可以在使用后声明,也就是变量可以先使用再声明。(因为函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部)

x = 5; // 变量 x 设置为 5
console.log(x);    //正常输出5
var x; // 声明 x


var y; // 声明 y
y = 5; // 变量 y 设置为 5
console.log(y);    //正常输出5

2.JavaScript初始化不会提升。(JavaScript 只有声明的变量会提升,初始化的不会。)

var x = 1;  // 初始化 x
var y = 2;  // 初始化 y
console.log(x);  //正常输出1
console.log(y);  //正常输出2


var a = 3;  // 初始化 a
console.log(a);  //正常输出3
console.log(b);  //输出undefined
var b = 4;  // 初始化 b

3.一个有趣的例子

var a = 1;  //初始化a为1
var b = 2;  //初始化b为2

var fun=function(){
    console.log(a); //undefined 
    var a = 22;
    console.log(b); //undefined 
    var b;
}
fun();

为什么会得到上述结果呢?原因如下:

JavaScript 只有声明的变量会提升,初始化的不会。所以在function中,有var a = 22,这是初始化,变量的声明会提升,但是变量的值没有提升。有var b , 声明的变量会提升到function最开头,但因为没有赋值,所以会输出undefined。上述代码等价于:

var a = 1;  //初始化a为1
var b = 2;  //初始化b为2
var fun=function(){
    var a;
    var b;
    console.log(a); //undefined 
    a = 22;
    console.log(b); //undefined 
}
fun();

4.另一个有趣的例子

var a = 1;  //初始化a为1
(function(){
    a=3;
    console.log(a);  //3
    var a;            
})();

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

var fun=function(){
    console.log(this.a);  //1
}
fun();

关键:立即执行函数、函数表达式和函数声明能通过this保留字,来访问外部变量。

当然如果function函数内部没有声明外部已有变量的话,function函数内部可直接使用外部已有变量,不使用this保留字也是可以的。(函数声明、函数表达式、立即执行函数结果都是这样,原因应该是当在function函数内部没有找到定义的变量时,会自动扩大作用域,向上搜索给出的变量)

var a = 1;  //初始化a为1
(function(){
    console.log(a);  //1        
})();
var fun=function(){
    console.log(a);  //1
}
fun();

 

以上是关于function(){}var fun=function(){}和function fun(){}的区别的主要内容,如果未能解决你的问题,请参考以下文章

作用域面试题

作用域面试题

作用域面试题

作用域面试题

声明提前例题

声明提前例题