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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
vue实现简单计算商品价格
Sep 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结合md5实现的加密解密方法
2016/01/25 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python连接mysql方法及常用参数
2020/09/01 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
计算机专业毕业生的自我评价
2013/11/18 职场文书
面试后的感谢信范文
2014/02/01 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
跳槽求职信范文
2014/05/26 职场文书
企业挂职心得体会
2014/09/10 职场文书
农业生产宣传标语
2014/10/08 职场文书
师德承诺书
2015/01/20 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android