javascript 函数声明与函数表达式的区别

先看一段代码

var f = function g() {

    return 1;

};

if (false) {

    f = function g(){

         return 2;

    };

}

alert(g());

你知道在不同浏览器中的输出结果是什么吗？

把这段代码放到IE 6 和chorme，firefox里面是完全不同的效果，ie6里面会输出2，chorm以及firefox会输出g没有定义，这是JScript的bug（微软给自己的javascript起名为JScript），IE6未能正确区分哪个是函数声明，哪个是函数表达式，那么何为声明，何为函数表达式呢？

在ECMAScript中，创建函数最常用的两个方法是函数表达式和函数声明：函数声明必须带有标示符（Identifier）（就是大家常说的函数名称），而函数表达式则可以省略这个标示符：
函数声明：
　　function 函数名称 (参数：可选){ 函数体 }
函数表达式：
　　function 函数名称（可选）(参数：可选){ 函数体 }

所以，可以看出，如果不声明函数名称，它肯定是表达式，可如果声明了函数名称的话，如何判断是函数声明还是函数表达式呢？ECMAScript是通过上下文来区分的，如果function fn(){}是作为赋值表达式的一部分的话，那它就是一个函数表达式，如果function foo(){}被包含在一个函数体内，或者位于程序的最顶部的话，那它就是一个函数声明。
还有一种函数表达式不太常见，就是被括号括住的(function fn(){})，他是表达式的原因是因为括号 ()是一个分组操作符，它的内部只能包含表达式。

知道了什么是函数声明/函数表达式，他们的区别是什么呢？最大的区别在于javascript代码初始化阶段

来看一段函数声明示例：

function fn () {

    console.log('fn 函数执行..');

    // code..

}

这样我们就声明了一个名称为fn的函数，这里出个思考题，如果在这个函数的上面来调用他的话会执行吗？

fn();

function fn () {

    console.log('fn 函数执行..');

    // code..

}

控制台输出结果为

此时fn函数是可以被调用到的，总结如下：

1、fn函数调用前，已经被声明，默认存储在全局上下文的变量中(可用 window.函数名来验证)

2、此方式为函数声明，在进入全局上下文阶段创建，代码执行阶段，它们已经可用。ps：javaScript在每次进入方法时都会先初始化上下文环境（由全局 → 局部）

3、它可以影响变量对象（仅影响存储在上下文中的变量）

function g(){

	return 1;

}

if(false){

	function g(){

		return 2;

	};

}

alert(g());  // 2

此时运行的结果就是2，而不是1，函数已经被提前声明了，而不是等到if语句符合条件时再声明

再来看一段函数表达式示例：

var fn = function () {

    console.log('fn 函数【表达式】声明执行..')

    // code..

}

这是一个函数表达式，如果在这个函数的上面来调用他的话会执行吗？

这说明在第一次调用fn()的时候，var fn 变量没有做为全局对象的一个属性而存在，且 fn 引用的匿名函数上下文也没有被初始化，所以在他之前调用失败，同样总结如下：

1、首先变量本身不做为一个函数存在，而是一个匿名函数的引用（值类型的不属于引用）

2、在代码执行阶段，初始化全局上下文时，它没有被做为全局的一个属性而存在，所以不会造成变量对象的污染

3、该类型的声明一般在插件的开发比较常见，也可做为闭包中回调函数的调用

所以 function fn () {} 并不等于 var fn = function () {} ，他们有本质上的区别。

巴特西

javascript 函数声明与函数表达式的区别

最新文章

热门文章