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 相关文章推荐
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
js实现全选和全不选功能
Jul 28 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
async和DOM Script文件加载比较
2014/07/20 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
党员公开承诺事项
2014/03/25 职场文书
促销活动总结范文
2014/04/30 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
写给领导的感谢信
2015/01/22 职场文书
python playwright之元素定位示例详解
2022/07/23 Python