GVKun编程网logo

js 函数定义和函数表达式的区别（js 函数定义和函数表达式的区别是什么）

17

想了解js函数定义和函数表达式的区别的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于js函数定义和函数表达式的区别是什么的相关问题，此外，我们还将为您介绍关于C语言带参宏定义和函数的区别、J

想了解js 函数定义和函数表达式的区别的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于js 函数定义和函数表达式的区别是什么的相关问题，此外，我们还将为您介绍关于C语言带参宏定义和函数的区别、Javascript 函数声明和函数表达式的区别、JavaScript中函数声明与函数表达式的区别详解、JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同的新知识。

本文目录一览：

js 函数定义和函数表达式的区别（js 函数定义和函数表达式的区别是什么）

js 函数定义和函数表达式的区别（js 函数定义和函数表达式的区别是什么）

Javascript中有2个语法都与function关键字有关，分别是：

函数定义：function FunctionName(FormalParameterList) { FunctionBody }

函数表达式：function [FunctionName](FormalParameterList) { FunctionBody }

从语法的定义上看，这两者几乎是一模一样的（唯一的区别是函数表达式可以省略函数名称），那么就解释器而言，当遇到这个结构的语句时，判定为函数表达式还是函数定义呢？

就javascript的语法而言，如果一条语句是以function关键字开始，那么这段会被判定为函数定义。而函数定义是不能被立即执行的，这无疑会导致语法的错误（SyntaxError），因此就必须有一个办法，使解析器可以将之识别为函数表达式。

前面已经说到，解析器识别函数定义的条件是以function关键字开始，那么自然，只要在function关键字的前面有任何其他的元素，就会从函数定义转变为函数表达式，以下方法都是可以的，这个大家都知道：

~function() {}();

!function() {}();

void function() {}();

但是这几个方法都有一个特点，就是看起来很别扭，所以现在为止，以括号包裹成了比较公认的方案。

回到正题，括号包裹同样有2个方式：(function() {})();和(function(){}());

他们的共通点是：都有括号。而括号在javascript中有2种作用：确立运算优先级，以及分组运算符，从代码上看，显然没有进行数学或逻辑运算，因此我认为这里的括号属于分组运算符。

根据标准，分组运算符的作用是：

Return the result of evaluating Expression. This may be of type Reference. 

返回评估括号中的表达式的结果。结果可能是Reference类型。

抛开像Reference类型这种词汇，这里的一个关键词应当是“ 评估 ”，但是关于分组运算符，又有一个很重要的下文：

This algorithm does not apply GetValue to the result of evaluating Expression.

这个算法不会对估算的结果使用GetValue。

有很多专用的名词，看起来确实复杂，简而言之，使用括号运算符本身不会让括号中的代码立即执行，只有当括号包含的这个“分组”参与其他运算时，才会执行。因此，(function(){})()这个语句，其实是首先用分组运算符评估了一个函数表达式，随后参与“函数调用”。而(function(){}())这个语句，则是用分组运算符评估了一个函数调用，随后由于语句的结束而被执行。


C语言带参宏定义和函数的区别

C语言带参宏定义和函数的区别

带参数的宏和函数很相似，但有本质上的区别：宏展开仅仅是字符串的替换，不会对表达式进行计算；宏在编译之前就被处理掉了，它没有机会参与编译，也不会占用内存。而函数是一段可以重复使用的代码，会被编译，会给它分配内存，每次调用函数，就是执行这块内存中的代码。

【示例①】用函数计算平方值。

运行结果：
1^2 = 1
2^2 = 4
3^2 = 9
4^2 = 16
5^2 = 25

【示例②】用宏计算平方值。

在 Visual Studio 和 C-Free 下的运行结果（其它编译器的运行结果可能不同，这个++运算的顺序有关）：
3^2 = 1
5^2 = 9
7^2 = 25

在示例①中，先把实参 i 传递给形参 y，然后再自增 1，这样每循环一次 i 的值增加 1，所以最终要循环 5 次。

在示例②中，宏调用只是简单的字符串替换，SQ(i++) 会被替换为 ((i++)*(i++))，这样每循环一次 i 的值增加 2，所以最终只循环 3 次。

由此可见，宏和函数只是在形式上相似，本质上是完全不同的。

带参数的宏也可以用来定义多个语句，在宏调用时，把这些语句又替换到源程序中，请看下面的例子：

运行结果：
sa=12, sb=15, sc=20, vv=60

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

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

Javascript Function无处不在，而且功能强大！通过Javascript函数可以让JS具有面向对象的一些特征，实现封装、继承等，也可以让代码得到复用。但事物都有两面性，Javascript函数有的时候也比较“任性”，你如果不了解它的“性情”，它很可能给你制造出一些意想不到的麻烦（bugs)出来。  

Javascript Function有两种类型:

1)函数声明(Function Declaration);

 // 函数声明
    function funDeclaration(type){
        return type==="Declaration";
    }

2)函数表达式(Function Expression)。

// 函数表达式
    var funExpression = function(type){
        return type==="Expression";
    }

上面的代码看起来很类似，感觉也没什么太大差别。但实际上，Javascript函数上的一个“陷阱”就体现在Javascript两种类型的函数定义上。下面看两段代码（分别标记为代码1段和代码2段）：

funDeclaration("Declaration");//=> true
    function funDeclaration(type){
      return type==="Declaration";
  }
funExpression("Expression");//=>error
      var funExpression = function(type){
        return type==="Expression";
   }
用函数声明创建的函数funDeclaration可以在funDeclaration定义之前就进行调用；
而用函数表达式创建的funExpression函数不能在funExpression被赋值之前进行调用。
为什么会这样呢？！这就要理解Javascript Function两种类型的区别：
用函数声明创建的函数可以在函数解析后调用（解析时进行等逻辑处理）；
而用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用。
这个区别看似微小，但在某些情况下确实是一个难以发现的陷阱。
出现这个陷阱的本质原因体现在这两种类型在Javascript function hoisting(函数提升）
和运行时机（解析时/运行时）上的差异。
关于变量提升，可见我的另外一篇博文<JavaScript变量提升>上面两段代码的函数提升可示意为下图：

代码1段JS函数等同于：

function funDeclaration(type){
        return type==="Declaration";
    }
    funDeclaration("Declaration");//=> true

代码2段JS函数等同于：

var funExpression;
    funExpression("Expression");//==>error
    funExpression = function(type){
        return type==="Expression";
    }

上述代码在运行时，只定义了funExpression变量，但值为undefined。因此不能在undefined上进行函数调用。此时funExpression赋值语句还没执行到。为了进一步加深JS函数两种类型的区别，下面给出一个更具迷惑性的示例，请看下面的代码（代码段4）：

var sayHello;
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
        function sayHey() {
            console.log("sayHey");
        }
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        function sayHey() {
            console.log("sayHey2");
        }
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

分析：sayHey是用函数声明创建的，在JS解析时JS编译器将函数定义进行了函数提升，也就是说，在解析JS代码的时候，JS编译器（条件判断不形成新的作用域，两个sayHey函数定义都被提升到条件判断之外）检测到作用域内有两个同名的sayHey定义，第一个定义先被提升，第二个定义接着被提升（第二个定义在第一个定义之下），第二个定义覆盖了第一个sayHey定义，所以sayHey（）输出sayHey2；而sayHello是用函数表达式创建的，其表达式的内容是在JS运行时（不是解析时）才能确定（这里条件判断就起到作用了），所以sayHello表达式执行了第一个函数定义并赋值，则sayHello（）输出sayHello。

　　代码段4的代码实际上等同于下面的代码（代码段5）：

var sayHello;
    function sayHey() {
            console.log("sayHey");
        }
    function sayHey() {
            console.log("sayHey2");
    }
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
        //hoisting...
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        //hoisting...
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

有的人也许会怀疑函数sayHey的定义是第二个覆盖第一个了么？我们可以把sayHey的源代码进行输出，有图有真相，如下图所示：

总结

　　Javascript 中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。这个微小的区别，可能会导致JS代码出现意想不到的bug,让你陷入莫名的陷阱中。

　　最后附上代码段4中sayHello和sayHey两个函数的核心步骤（个人理解，若有异议欢迎留言探讨）：

　　上图为sayHello函数执行的主要步骤示意图。

上图为sayHey函数执行主要步骤的示意图。若对闭包感兴趣，可以看另外一篇博文<JavaScript高级特性 闭包>

JavaScript中函数声明与函数表达式的区别详解

JavaScript中函数声明与函数表达式的区别详解

前言

在ECMAScript中，有两个最常用的创建函数对象的方法，即使用函数表达式或者使用函数声明。对此，ECMAScript规范明确了一点，即是，即函数声明 必须始终带有一个标识符（Identifier），也就是我们所说的函数名，而函数表达式则可以省略。下面看看这两者的详细区别介绍。

什么是 Function Declaration（函数声明）？

Function Declaration 可以定义命名的函数变量，而无需给变量赋值。Function Declaration 是一种独立的结构，不能嵌套在非功能模块中。可以将它类比为 Variable Declaration（变量声明）。就像 Variable Declaration 必须以“var”开头一样，Function Declaration 必须以“function”开头。

举例来说

rush:js;"> function bar() { return 3; }

ECMA 5（13.0）定义语法：

function Identifier ( FormalParameterList[opt] ) { FunctionBody }

函数名在自身作用域和父作用域内是可获取的（否则就取不到函数了）。

rush:js;"> function bar() { return 3; }

bar() //3
bar //function

什么是 Function Expression（函数表达式）？

Function Expression 将函数定义为表达式语句（通常是变量赋值）的一部分。通过 Function Expression 定义的函数可以是命名的，也可以是匿名的。Function Expression 不能以“function”开头（下面自调用的例子要用括号将其括起来）。

举例来说

rush:js;"> //anonymous function expression var a = function() { return 3; }

//named function expression
var a = function bar() {
return 3;
}

//self invoking function expression
(function sayHello() {
alert("hello!");
})();

ECMA 5（13.0）定义语法：

function Identifieropt ( FormalParameterList[opt] ) { FunctionBody }

（这个定义感觉并不完整，因为它忽略了一个条件：外围语句是表达式，并且不以“function”开头）

函数名（如果有的话）在作用域外是不可获取的（与 Function Declaration 对比）。

那 Function Statement 是什么？

Function Statement 有时是 Function Declaration 的另一种说法。但是 kangax 指出，在 mozilla 中，Function Statement 是 Function Declaration 的一种拓展，使得 Function Declaration 语句可以在任何允许使用 statement（语句）的地方使用。但是 Function Statement 现在还不是标准，所以不建议应用在产品开发中。

下面我们从一些小测试开始。猜猜以下情况都会弹出什么结果？

题 1:

rush:js;"> function foo(){ function bar() { return 3; } return bar(); function bar() { return 8; } } alert(foo());

题 2:

rush:js;"> function foo(){ var bar = function() { return 3; }; return bar(); var bar = function() { return 8; }; } alert(foo());

题 3:

rush:js;"> alert(foo()); function foo(){ var bar = function() { return 3; }; return bar(); var bar = function() { return 8; }; }

题 4:

rush:js;"> function foo(){ return bar(); var bar = function() { return 3; }; var bar = function() { return 8; }; } alert(foo());

如果你的答案不是8、3、3和 [Type Error: bar is not a function] 的话，就继续往下读吧……（即使答对了也要继续读哦）

现在来解释下前面的测试。

Question 1 用了 function declaration，也就是说它们 get hoisted（被提升）了……

等一下，什么是 Hoisting？

这里引用 Ben Cherry的话：“Function declaration和function variable（函数变量）通常会被 JavaScript 解释器移（‘hoisted'）到当前作用域顶部”。

function declaration 被提升时，整个函数体都会随之提升，所以 Question 1 的代码经过解释器解释后是像这样运行的：

rush:js;"> //**Simulated processing sequence for Question 1** function foo(){ //define bar once function bar() { return 3; } //redefine it function bar() { return 8; } //return its invocation return bar(); //8 } alert(foo());

但是，我们经常被告诉说，return 语句后面的代码是运行不到的啊……

执行 JavaScript 过程中，有 Context（ECMA 5 将之分解为 LexicalEnvironment、VariableEnvironment 和 ThisBinding）和 Process（一系列按序调用的语句）两个概念。当程序进入执行域时，Declaration 会造成 VariableEnvironment。它们不同于 Statement（比如 return），也不遵循 Statement 的运行规则。

Function Expression 会被提升吗？

这取决于表达式。比如 Question 2 中的第一个表达式：

rush:js;"> var bar = function() { return 3; };

等号左边的（var bar）是 Variable Declaration。Variable Declaration 会被提升，但是 Assignment Expression（赋值表达式）不会。所以当 bar 提升时，解释器会这样初始化：var bar = undefined。而函数定义本身不会被提升。

（ECMA 5 12.2 带有 initialzier（初始化器）的变量是在 VariableStatement 执行时，由 AssignmentExpression 赋值的，而不是在变量被创建时。）

因此 Question 2 的代码会按以下顺序运行：

rush:js;"> //**Simulated processing sequence for Question 2** function foo(){ //a declaration for each function expression var bar = undefined; var bar = undefined; //first Function Expression is executed bar = function() { return 3; }; // Function created by first Function Expression is invoked return bar(); // second Function Expression unreachable } alert(foo()); //3

你可能会说，这还能解释的通，但是 Question 3 的答案错了，我在 Firebug 运行会报错。

把代码保存在 HTML 文件中，之后在 Firefox 上运行试试。或者在 IE8、Chrome 或 Safari 控制台中运行。显然 Firebug 控制台在“global（全局）”作用域（实际并不是全局的，而是特有的“Firebug”作用域——试着在 Firebug 控制台中运行“this == window”你就知道了）运行代码时，不会将函数提升。

Question 3 和 Question 1 的逻辑相似。这次是 foo 函数被提升了。

Question 4 就很简单了，根本就没有函数提升……

可以这么说，但是如果根本没有提升的话，TypeError 会是“bar not defined”，而不是“bar not a function”。此例中确实没有函数提升，但是有变量提升。因此 bar 在开始就被声明了，但是它的值并没有定义。其它代码都是按顺序执行的。

rush:js;"> //**Simulated processing sequence for Question 4** function foo(){ //a declaration for each function expression var bar = undefined; var bar = undefined; return bar(); //TypeError: "bar not defined" //neither Function Expression is reached } alert(foo());

还应该注意什么？

官方是禁止在非功能模块（比如 if）中使用 Function Declaration 的。但是所有浏览器都支持，但是各自的解释方式不同。

例如下面的代码段在 Firefox 3.6 中会抛错，因为它将 Function Declaration 解释成了 Function Statement（见上文），所以 x 没有定义。但是在 IE8、Chrome 5 和 Safari 5 中，会返回函数 x（和标准的 Function Declaration 一样）。

rush:js;"> function foo() { if(false) { function x() {}; } return x; } alert(foo());

可以看出使用 Function Declaration 可能会引起混淆，那么它有什么优点吗？

你可能会说 Function Declaration 很宽松啊——如果试图在声明前使用函数，提升确实可以修正顺序，以便函数可以正确调用。但是这种宽松不利于严谨的编码，从长远的角度来看，很有可能会促进而不是阻止意外的发生。毕竟，程序员按特定的顺序排列语句是有原因的。

那么还有其它理由支持 Function Expression 的吗？

你猜呢？

1）Function Declaration 感觉像是要模仿 Java 风格的方法声明，但是 Java 方法和 JavaScript 并不一样。在 JavaScript 中，函数是含值的 living 对象。Java 方法仅是对元数据的存储。下面的两段代码都定义了函数，但是只有 Function Expression 看着像创建了对象。

rush:js;"> //Function Declaration function add(a,b) {return a + b}; //Function Expression var add = function(a,b) {return a + b};

2）Function Expression 用处更多。Function Declaration 只能作为“statement”孤立存在。它所能做的就是创建一个当前作用域下的对象变量。相比之下，Function Expression（根据定义）是大型结构的一部分。如果想要创建匿名函数、给 prototype（原型）添加函数或是将函数用作其它对象的 property（属性），都可以用 Function Expression。每当用高阶应用，比如 curry 或 compose，创建新的函数时都是在用 Function Expression。Function Expression 和 Functional Programming（函数式编程）分不开。

rush:js;"> //Function Expression var sayHello = alert.curry("hello!");

Function Expression 有缺点吗？

Function Expression 创建的函数大多是匿名的。比如下面的函数是匿名的，today 只是一个匿名函数的引用：

rush:js;"> var today = function() {return new Date()}

这会有问题吗？多数情况下不会，但是就像 Nick Fitzgerald 指出的，调试匿名函数会很烦。他建议使用 Named Function Expressions （NFEs）作为工作区：

rush:js;"> var today = function today() {return new Date()}

但是如 Asen Bozhilov 所说（和 Kangax 文档）NFEs 在 IE9 以下无法正确执行。

结论

随意放置的 Function Declaration 具有误导性，并且很少有（如果有的话）情况，用 Function Expression 给变量赋值无法替代 Function Declaration。但是如果必须使用 Function Declaration 的话，将其放在所属作用域顶部可以减少混淆。永远不要把 Function Declaration 放在 if 语句中。

说了这么多，可能在你自己的情况下，Function Declaration 还是很有用的。这没什么。死记教条是危险的，并且通常会造成代码拐弯抹角。更重要的是你理解了概念，这样就可以根据自身情况决定用哪种方式创建函数。以上就是本文的全部内容了，希望此文对大家在这方面有帮助。

JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同

JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同

函数表达式和函数声明

在ECMAScript中，创建函数的最常用的两个方法是函数表达式和函数声明，两者期间的区别是有点晕，因为ECMA规范只明确了一点：函数声明必须带有标示符（Identifier）（就是大家常说的函数名称），而函数表达式则可以省略这个标示符：

　　

函数声明:

　　function 函数名称 (参数：可选){ 函数体 }

　　

函数表达式：

　　function 函数名称（可选）(参数：可选){ 函数体 }

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

rush:js;"> function foo(){} // 声明，因为它是程序的一部分 var bar = function foo(){}; // 表达式，因为它是赋值表达式的一部分 new function bar(){}; // 表达式，因为它是new表达式 (function(){ function bar(){} // 声明，因为它是函数体的一部分 })();

还有一种函数表达式不太常见，就是被括号括住的(function foo(){})，他是表达式的原因是因为括号 ()是一个分组操作符，它的内部只能包含表达式，我们来看几个例子：

function foo(){} // 函数声明 (function foo(){}); // 函数表达式：包含在分组操作符内

命名函数表达式

提到命名函数表达式，理所当然，就是它得有名字，前面的例子var bar = function foo(){};就是一个有效的命名函数表达式，但有一点需要记住：这个名字只在新定义的函数作用域内有效，因为规范规定了标示符不能在外围的作用域内有效：

rush:js;"> var f = function foo(){ return typeof foo; // foo是在内部作用域内有效 }; // foo在外部用于是不可见的 console.log(typeof foo); // "undefined" console.log(f()); // "function" var f = function foo(){ return foo; // foo是在内部作用域内有效 }; // foo在外部用于是不可见的 console.log(typeof foo); // "undefined" console.log( f()==f); // "function" console.log(f.name);//foo

既然，这么要求，那命名函数表达式到底有啥用啊？为啥要取名？

正如我们开头所说：给它一个名字就是可以让调试过程更方便，因为在调试的时候，如果在调用栈中的每个项都有自己的名字来描述，那么调试过程就太爽了，感受不一样嘛。

ps：JS中函数声明与函数表达式的不同

Js中的函数声明是指下面的形式：

rush:js;"> function functionName(){ }

这样的方式来声明一个函数，而函数表达式则是类似表达式那样来声明一个函数，如：

rush:js;"> var functionName = function(){ }

可能很多朋友在看到这两一种写法时会产生疑惑，这两种写法差不多，在应用中貌似也都是可行的，那他们有什么差别呢？

事实上，js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明，js解析器会优先读取，确保在所有代码执行之前声明已经被解析，而函数表达式，如同定义其它基本类型的变量一样，只在执行到某一句时也会对其进行解析，所以在实际中，它们还是会有差异的，具体表现在，当使用函数声明的形式来定义函数时，可将调用语句写在函数声明之前，而后者，这样做的话会报错。

今天关于js 函数定义和函数表达式的区别和js 函数定义和函数表达式的区别是什么的介绍到此结束，谢谢您的阅读，有关C语言带参宏定义和函数的区别、Javascript 函数声明和函数表达式的区别、JavaScript中函数声明与函数表达式的区别详解、JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇Node.js安装及环境配置之Windows篇（nodejs安装及环境配置win10）

下一篇js 简单实现获取短信按钮倒计时60秒（js 简单实现获取短信按钮倒计时60秒）

相关文章