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 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
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
dedecms中使用php语句指南
2014/11/13 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python三方库之requests的快速上手
2019/03/04 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
Python实现自动装机功能案例分析
2020/10/22 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
音乐兴趣小组活动总结
2014/07/07 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
小学端午节活动总结
2015/02/11 职场文书
董事长致辞
2015/07/29 职场文书
中学政教处工作总结
2015/08/13 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
入党申请书怎么写?
2019/06/21 职场文书