Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式


Posted in Javascript onJune 24, 2014

函数声明

function foo() {}

函数 foo 将会在整个程序执行前被 hoist (提升),因此它在定义 foo 函数的整个 scope (作用域)中都是可用的。即使在函数定义之前调用它也没问题。

foo(); // Works because foo was created before this code runs
function foo() {}

因为我打算专门写篇介绍作用域的文章,所以这里就不详述了。

函数表达式

对于函数声明,函数的名称是必须的,而对于函数表达式而言则是可选的,因此,就出现了匿名函数表达式和命名函数表达式。如下:

函数声明: function functionName (){  }
函数声明: function functionName[可选](){  }
那么我就知道,如果没有函数名的话,一定就是函数表达式,但是对于有函数名的情况该如何判断呢?
Javascript 规定如果整个函数体是作为表达式的一部分时,那么它就是函数表达式,否则即是函数声明。以下为表达式:

var fuc = foo(){}

我们再举几个极端的表达式例子:

!function foo(){}
true && function foo(){}

以上的语句这里只是为了区分函数表达式,一般不会这样写。那么用一个对比的例子来看看效果:

foo1();//foo1 is not defined 
foo2();//works because foo2 was created before this code runs
!function foo1() {
  alert('foo1 works');
};
function foo2() {
  alert('foo2 works');
};

匿名函数表达式

var foo = function() {};

上面的例子将一个匿名函数赋值给了变量 foo。

foo; // 'undefined'
foo(); // this raises a TypeError
var foo = function() {};

由于 var 是一个声明所以这里对变量 foo 进行 hoist (提升),因此当程序执行时,变量 foo 是可调用的。
但是由于赋值语句只有在运行时才生效,所以变量 foo 的值为 undefined。

命名函数表达式

另一个要讲到的就是命名函数的赋值。

var foo = function bar() {
  bar(); // Works
};
bar(); // ReferenceError

在这里,命名函数 bar 赋值给了变量 foo,所以在函数声明外是不可见的,但在 bar 函数内部仍然可以调用。这是因为 Javascript 对命名函数处理的机制,函数的名称永远在函数内部的作用域中有效。

Javascript 相关文章推荐
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
ES6基础之默认参数值
Feb 21 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 #Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 #Javascript
js实现div闪烁原理及实现代码
Jun 24 #Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 #Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 #Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 #Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 #Javascript
You might like
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python import用法以及与from...import的区别
2015/05/28 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
高效课堂教学反思
2016/02/24 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Java基础-封装和继承
2021/07/02 Java/Android
基于Python实现nc批量转tif格式
2022/08/14 Python