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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
JQuery教学之性能优化
May 14 Javascript
判断访客终端类型集锦
Jun 05 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP count()函数讲解
2019/02/03 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
JS如何生成动态列表
2020/09/22 Javascript
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python实现月食效果实例代码
2019/06/18 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
青春励志演讲稿
2014/04/29 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS