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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
vue项目实现分页效果
Mar 24 Vue.js
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
详细介绍PHP应用提速面面观
2006/10/09 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
js给selected添加options的方法
2015/05/06 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
angular4自定义组件详解
2017/09/28 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
浅析python内置模块collections
2019/11/15 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
this关键字的作用
2016/01/30 面试题
化工专业大学生职业生涯规划书
2014/01/14 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
交通安全学习心得体会
2016/01/18 职场文书