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 滚轮事件使用说明
Mar 07 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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过滤危险html代码的函数
2008/07/22 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
Js组件的一些写法
2010/09/10 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
企业治理工作自我评价
2013/09/26 职场文书
元旦晚会感言
2014/03/12 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
温馨提示标语
2014/06/26 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
详解Python 3.10 中的新功能和变化
2021/04/28 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android