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去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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
中篇:安装及配置PHP
2006/12/13 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
select组合框option的捕捉实例代码
2008/09/30 Javascript
对比分析json及XML
2014/11/28 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Django models文件模型变更错误解决
2020/05/11 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
2014年自我评价
2014/01/04 职场文书
体育比赛口号
2014/06/09 职场文书
顶岗实习协议书
2015/01/29 职场文书
品质保证书格式
2015/02/28 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书