【前端常用小知识】JS中的函数声明和函数表达式

2022-02-20 04:17:38

会写这篇随笔是因为最近碰到一个类似 (function(){})() 这样的一个格式的JS函数，在声明函数之后直接加一对小括号，是啥意思，有点摸不着头脑，后来经过查阅资料知道这涉及函数声明和函数表达式的概念。

先来看看什么样的是函数声明：

<script>
function() {
    alert("hello, world.");
};

function foo() {
    alert("hello, world.");
};
</script>

再看看什么样的是函数表达式：

<script>
var foo = function() {
    alert("hello, world.");
};
</script>

JavaScript不允许在函数声明后面直接使用小括号，而函数表达式则没有这个限制，但是我们为什么不使用以下的函数表达式的方式呢？

<script>
var foo = function() {
    alert("hello, world.");
}();
</script>

虽然从语法解析的角度看没有问题，但是上面的代码存在弊端，它引入了一个变量，可能会污染现有的运行环境，带来潜在的问题。于是，改成下面的这种形式，这就点题了

<script>
(function() {
    alert("hello, world.");
})();
</script>

对应了格式(function(){})()，这段代码的意思是声明一个函数，然后立刻执行，它没有名字（匿名函数）就无法像普通函数那样随时随地调用了，所以在他定义完成后就马上调用他，后面的括号()是运行这个函数的意思。

码农公寓