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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 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/10/09 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
理论讲解python多进程并发编程
2018/02/09 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
土木建筑学生自我评价
2014/01/14 职场文书
高中教师考核方案
2014/05/18 职场文书
合作协议书模板
2014/10/10 职场文书
2014年村官工作总结
2014/11/24 职场文书