JavaScript

Javascript 中函数声明与函数表达式的区别

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

Javascript 中函数声明与函数表达式的区别

Javascript 中有着多种方式可以定义一个函数。并由于几种方式之间的实现差别很小,容易让 JS 新手搞不清楚其中的区别。所以在这篇文章中,我将带着自己的思考讨论下创建函数的各种形式。

1、 函数声明

这是使用函数最常见的方法,并且它与其他语言相似,比如 PHP。函数声明以 function 关键字开头,随后跟着函数的名称。

这是一个示例:

function weather() {
    console.log('it is raining outside');
}

weather();

输出:

it is raining outside

这里需要注意的是,这里的函数调用在函数声明之后。不过如下操作也不报错。

weather();

function weather() {
    console.log("it is raining outside");
}

输出:

it is raining outside

如果你在想:这怎么回事?在函数声明前调用了函数?

  • 答案是 函数提升。通过函数提升,JavaScript 把所有的函数声明放在了函数之前。所以在何时何地都可以调用函数而不会产生问题。

如上所述即为函数声明的简述。接下来我们看下函数表达式。

2、 函数表达式

实现与上面相同的逻辑,但这次用表达式的方式来做。

weather();

var weather = function() {
    console.log("it is raining outside");
    console.log(weather);
}

在这里,我们已经将函数赋值给了变量 weather。不过上述代码将会报一个错误。

输出:

TypeError: weather is not a function

原因是函数表达式并不支持提升。所以我们一定要在调用函数前定义函数,代码如下所示:

var weather = function() {
    console.log("it is raining outside");
    console.log(weather);
}
weather();

输出:

it is raining outside
[Function: weather]

虽然在这种方式下函数不能自动提升,但我更倾向于使用函数表达式而不是常规的函数声明。对我来说,函数表达式看起来会更清晰一点。表达式还强迫我们把调用放在声明的后边,让代码更清晰可读一些。

匿名函数

另一点是,尽管我们把函数分配给了变量,但我们并没有在 function 关键字后添加函数名称。所以,这种写法被称为 匿名函数

命名函数表达式

你还可以为函数表达式命名:

var weather = function w () {
    console.log("it is raining outside");
    console.log(weather);
    console.log(w);
}
weather();

注意在 function 关键字后的 w

输出:

it is raining outside
[Function: weather]
[Function: w]

不过,如下的写法是不起作用的

var weather = function w () {
    console.log("it is raining outside");
    console.log(weather);
}
console.log(w);
weather();

输出:

ReferenceError: w is not defined

这意味着名称 w 的作用范围在函数内受到了限制

立即调用函数表达式

当我想为浏览器写一些即时性的脚本时,我会用这种方式来实现,代码看起来像这样:

(function() {
    console.log("it is raining outside");
})();

它既不需要调用也不需要函数名称。这种函数在脚本加载完毕后会立即执行。此外,由于这是一个函数,所以其中定义的变量将不会污染全局变量区。

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注