javascript 用函数语句和表达式定义函数的区别详解


Posted in Javascript onJanuary 06, 2014

使用javascript多年,写过无数函数,今天却才真正弄明白两种函数定义的区别,真是悲剧,写下这个随笔, 以时刻提醒自己要打好基础 , 一大把年纪了, 不能继续懵懵懂懂了。

通常我们会看到以下两种定义函数的方式:

// 函数语句
function fn(str)
{
  console.log(str);
};
// 表达式定义
var fnx=function(str)
{
  console.log(str+ ' from fnx');
};

以前都是凭借自己手指的感觉随心所欲使用两者 -_- || ,今天看了js基础, 总算是解决了心中对他们的困惑:

两种方式都创建了新的函数对象, 但函数声明语句的函数名是一个变量名, 变量指向函数对象, 和通过var声明变量一样,函数定义语句中的函数被显示地提前到了脚本或函数的顶部, 因此它们在整个脚本和函数内都是可见的,但是使用var 表达式定义函数, 只有变量声明提前了,变量初始化代码仍然在原来的位置, 用函数语句创建的函数, 函数名称和函数体均被提前,所以我们可以在声明它之前就使用它。

代码例子如下:

   console.log(typeof(fn)); // function
    fn('abc'); // abc

    console.log(typeof(fnx)); // undefined
    if(fnx)
        fnx('abc');  // will not execute
    else
        console.log('fnx is undefined'); // fnx is undefined
    // 函数语句
    function fn(str)
    {
        console.log(str);
    };
    // 表达式定义
    var fnx=function(str)
    {
        console.log(str+ ' from fnx');
    };

代码很简单, 希望和我之前一样没有弄明白两者区别的同学能有所收获 。
Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
js形成页面的一种遮罩效果实例代码
Jan 04 #Javascript
JavaScript将数据转换成整数的方法
Jan 04 #Javascript
jquery.post用法关于type设置问题补充
Jan 03 #Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 #Javascript
jquery.post用法示例代码
Jan 03 #Javascript
简单的代码实现jquery定时器
Jan 03 #Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
建立动态的WML站点(三)
2006/10/09 PHP
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP强制转化的形式整理
2020/05/22 PHP
javascript的函数
2007/01/31 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JavaScript模拟push
2016/03/06 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python中super函数用法实例分析
2019/03/18 Python
浅析python标准库中的glob
2020/03/13 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
基督教婚礼主持词
2014/03/14 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
2014年校长工作总结
2014/12/11 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python