Function构造函数、 函数声明 、 函数表达式 的区别

对比下面的例子：

Function构造函数

var multiply = new Function('x', 'y', 'return x * y');
复制代码

函数声明

function multiply(x, y) {
   return x * y;
} // 没有分号
复制代码

函数表达式

var multiply = function(x, y) {
   return x * y;
 };
复制代码

一个命名为func_named的函数的函数表达式，被赋值给变量multiply:

var multiply = function func_name(x, y) {
   return x * y;
};
复制代码

区别

• 函数名不能被改变，但函数的变量却能够被再分配
• 函数名只能在函数体内使用
• 倘若在函数体外使用函数名将会导致错误（如果函数之前是通过一个var语句声明的则是undefined）。如：

var y = function x() {};
alert(x); // throws an error
复制代码

• 函数名和函数的变量存在着差别。函数名不能被改变，但函数的变量却能够被再分配。函数名只能在函数体内使用。倘若在函数体外使用函数名将会导致错误
• 函数名与被函数赋值的变量是不相同的. 彼此之间没有关系
• 函数声明同时也创建了一个和函数名相同的变量
• 使用 'new Function'定义的函数没有函数名。在 SpiderMonkey JavaScript引擎中，其函数的序列化形式表现的好像它拥有一个名叫"anonymous"的名称一样,而实际上其函数并没有名称，anonymous 不是一个可以在函数内被访问到的变量
• 和函数表达式或者Function构造函数定义的函数不同，函数声明的函数可以在它被声明之前使用。如：

// 函数声明
foo() // foo
function foo() {
    return 'foo'
}
// 函数表达式
foo2() // foo2 is not a function
var foo2 = function(){
    return 'foo2'
}
// Function 构造函数  
foo3()  // foo3 is not a function
var foo3 = new Function('return "foo3"')

复制代码

• 函数表达式定义的函数继承了当前的作用域。换言之，函数构成了闭包。另一方面，Function构造函数定义的函数不继承任何全局作用域以外的作用域(那些所有函数都继承的)。

• 通过函数表达式定义的函数和通过函数声明定义的函数只会被解析一次，而Function构造函数定义的函数却不同。

注意在通过解析Function构造函数字符串产生的函数里，内嵌的函数表达式和函数声明不会被重复解析。例如：

var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
foo(); // 函数体字符串"function() {\n\talert(bar);\n}"的这一部分不会被重复解析。
复制代码

函数声明如何转成函数表达式

• 成为表达式的一部分

// 函数表达式
var foo = function(){}
var bar = function bar(){}
(function bar2() {})
复制代码

• 不再是函数或者脚本自身的“源元素” （source element）。“源元素”是脚本或函数体中的非嵌套语句。

var x = 0;               // source element
if (x === 0) {           // source element
   x = 10;               // 非source element
   function boo() {}     // 非 source element 函数表达式
}
function foo() {         // source element   函数声明
   var y = 20;           // source element
   function bar() {}     // source element   函数声明
   while (y === 10) {    // source element
    function blah() {} // 非 source element 函数表达式
     y++;               //非source element
   }
}
复制代码

如有侵权，请发邮箱至wk_daxiangmubu@163.com 或留言，本人会在第一时间与您联系，谢谢！！

长按二维码关注我们，了解最新前端资讯