JavaScript中两种执行函数的写法

最新推荐文章于 2022-07-15 15:52:57 发布

原创最新推荐文章于 2022-07-15 15:52:57 发布 · 246 阅读

CC 4.0 BY-SA版权

8 篇文章

订阅专栏

本文介绍了JavaScript中的函数声明与函数表达式之间的区别，包括匿名函数的使用方式及其作为事件处理程序的应用。此外还探讨了如何利用匿名函数作为命名空间以避免变量冲突。

(function(){...}) () 和 (function(){...}())

JavaScript中函数的基本概念：

函数声明，函数表达式，匿名函数

函数声明：

function fnName(){...};使用function关键字声明一个函数，再指定一个函数名，叫做函数声明。

函数表达式：

var fnName = function(){...};使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫做函数表达式。

匿名函数：

function(){...};使用function关键字声明一个函数，但未给函数命名，叫做匿名函数。匿名函数属于函数表达式。匿名函数可以赋予一个变量来创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

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

1、运行解析时，会“函数声明提升”当前执行环境（作用域）上的函数声明。而函数表达式只有当代码执行到它所在行时，才会从上而下地解析函数表达式。

2、函数表达式后可以加括号立即调用该函数，函数声明不可以，只能以fnName()的形式调用。

fnName();                            //正确，函数声明提升，可在声明前调用
function fnName(){...};
fnName();                            //只能以函数名的方式调用

fnName();                               //报错，只能在表达式之后调用
var fnName = function(){...};
var fnName = function(){...}();         //函数表达式可以加括号调用

(function(){...}) ()和 (function(){...}())两种书写方式中，可直接调用，都为匿名函数（函数表达式）的写法，只是后者在外层包了一个括号，加括号是最安全的做法，因为！,+,-等运算符还会和函数的返回值进行运算，有时造成不必要的麻烦。

(function(){...})()称为“匿名包裹器”或“命名空间”，因为JavaScript中没有私有域的概念，所以自己的声明的变量有可能会被同名的全局变量所覆盖，故使用这种匿名函数作为“容器”的方法，内部能访问外部变量，外部不能访问内部变量，防止变量冲突。