javascript 用函数语句和表达式定义函数的区别详解
更新时间：2014年01月06日 08:47:55 作者：
本篇文章主要介绍了javascript 用函数语句和表达式定义函数的区别。需要的朋友可以过来参考下，希望对大家有所帮助
使用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');
};
代码很简单， 希望和我之前一样没有弄明白两者区别的同学能有所收获 。
相关文章
栅格就是网格，本文详细的介绍了Bootstrap网页布局网格的原理和实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能,下面就来介绍一下webpack5处理图片、图标字体、多媒体等静态资源文件的实现方法,感兴趣的可以了解一下2023-12-12
PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈现PDF文件,它支持内容检索、页面跳转、文件打印等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了JavaScript 闭包机制详解及实例代码的相关资料,需要的朋友可以参考下2016-10-10
事件委托，也叫事件代理，是JavaScript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素，让外层元素担当事件监听的职务。本文将详细为大家介绍JavaScript事件委托的用法，需要的可以参考一下2022-01-01
这篇文章主要介绍了JS实现select选中option触发事件操作,结合实例形式总结分析了javascript针对select下拉选中option项触发事件相关操作技巧,需要的朋友可以参考下2018-07-07
js 生成密匙流 脚本代码...2007-09-09
本文是脚本之家小编日常整理的关于javascript知识点，包括javascript拥有的特点，组成部分，数据类型等方面，对javascript知识点相关知识感兴趣的朋友一起学习吧2015-12-12
前端请求全面解析之AJAX、Axios 与 Fetch的使用详解与代码示例
这篇文章主要介绍了前端请求全面解析之AJAX、Axios 与 Fetch的使用详解与代码示例,AJAX是早期的异步请求技术,FetchAPI是现代的基于Promise的请求方案,Axios是第三方库,支持自动转换JSON、拦截器等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了ES6新特性之函数的扩展,实例形式较为详细的分析了ES6针对函数参数、运算符及相关新特性的扩展操作与注意事项,需要的朋友可以参考下2017-04-04
最新评论