IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

Javascript中的函数声明和函数表达式

火丁笔记 2011-03-01 22:40:09 累计浏览 2,883 次
本机暂存

    Javascript有很多有趣的用法,在Google Code Search里能找到不少,举一个例子:

~function() {
    alert("hello, world.");
}();

    试一下就知道这段代码的意思就是声明一个函数,然后立刻执行,因为Javascript中的变量作用域是基于函数的,所以这样可以避免变量污染,但这里的位运算符“~”乍一看让人摸不到头脑,如果去掉它再运行则会报错:SyntaxError。

    在阐述为什么之前,让我们先来明确Javascript中的两个概念:函数声明和函数表达式:

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

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

function foo() {
    alert("hello, world.");
};

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

var foo = function() {
    alert("hello, world.");
};

    现在回头看看文章开头的问题,为什么去掉位操作符“~”后运行会报错,这是因为从语法解析的角度看,Javascript不允许在函数声明的后面直接使用小括号,而函数表达式则没有这个限制,通过在函数声明前面加上一个“~”操作符,就可以把这个函数声明变成一个函数表达式,同样的,在函数声明前面加上“!,+,-”等操作符也是可行的。

    那我们为什么不使用下面这种函数表达式的方式呢?

var foo = function() {
    alert("hello, world.");
}();

    虽然从语法解析的角度看没有问题,但是上面的代码存在弊端,它引入了一个变量,可能会污染现有的运行环境,带来不易调试的问题。

    使用位操作符“~”把函数声明编程函数表达式的方法多少显得有点幺蛾子,其实我们还有更直观一点的方法,就是给function加上小括号:

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

    弄明白了原理,不管遇到什么写法,都不会再丈二和尚摸不着头脑了。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,349)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  8. 什么是全栈工程师? (累计阅读 14,038)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,735)
  10. 7 天打造前端性能监控系统 (累计阅读 11,187)