浅谈javascript 函数表达式和函数声明的区别


Posted in Javascript onJanuary 05, 2016

javascript中声明函数的方法有两种:函数声明式和函数表达式.

区别如下:

1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.

2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.

3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而

    函数表达式可以在任何地方声明.

下面分别用两种方法定义函数:

//函数声明式
 function greeting(){
    console.log("hello world"); 
 }
 
 
 //函数表达式
 var greeting = function(){
   console.log("hello world"); 
 }

下面一个有趣的javascript:

function f() { console.log('I am outside!'); }
(function () {
 if(false) {
  // 重复声明一次函数f
  function f() { console.log('I am inside!'); }
 }
 f();
}());

会输出什么呢?第一反应应该是"I am outside"吧.  结果在chrome中输出"I am inside",IE11直接报错,firefox低一点的版本输出"I am outside"...

chrome输出的结果很明确的反应了用函数声明式声明的函数的特点--函数在声明之前就可以调用.

IE报错显示缺少对象,因为函数声明在了条件里,违背了函数声明式的原则.

函数表达式的作用域:

如果函数表达式声明的函数有函数名,那么这个函数名就相当于这个函数的一个局部变量,只能在函数内部调用,举个栗子:

var f = function fact(x) { 
        if (x <= 1) 
          return 1;
        else 
          return x*fact(x-1);
        };
        alert(fact());  // Uncaught ReferenceError: fact is not defined

fact()在函数内部可以调用,在函数外部调用就会报错:fact未定义.
fact

我们再来详细看下

函数声明

函数声明示例代码

代码如下:

function fn () {
  console.log('fn 函数执行..');
  // code..
}

这样我们就声明了一个名称为fn的函数,这里出个思考,你认为在这个函数的上面来调用他的话会执行吗?还是会报错?

代码如下:fn(); // 在之前调用我们声明的fn函数 function fn () { console.log('fn 函数执行..'); // code..}

控制台输出结果:

浅谈javascript 函数表达式和函数声明的区别

是的,此时fn函数是可以被调用到的,这里来总结下原因。

总结:

1:此时fn函数是变量的结果,默认存储在全局上下文的变量中(可用 window.函数名 来验证)

2:此方式为函数声明,在进入全局上下文阶段创建,代码执行阶段,它们已经可用。ps:javaScript在每次进入方法时都会先初始化上下文环境(由全局 → 局部)

3:它可以影响变量对象(仅影响存储在上下文中的变量)

函数表达式

函数表达式示例代码

代码如下:

var fn = function () {
  console.log('fn 函数【表达式】声明执行..')
  // code..
}

这样我们就声明了一个匿名函数,并且把它的引用指向了变量fn

再次在该表达式声明的函数上下方各调用一次,来看控制台的输出结果。

代码如下:

// 为了清晰的看到控制台的输出,我们在各自调用前后做个标记,增加可读性。
console.log('之前调用开始..');
fn();
console.log('之前调用结束..');
var fn = function () {
  console.log('fn 函数【表达式】声明执行..')
  // code..
}
console.log('之后调用开始..');
fn();
console.log('之后调用开始..');

控制台打印结果:

浅谈javascript 函数表达式和函数声明的区别

可以看到代码在执行到第一次调用fn()函数的时候,提示:fn is not a function (fn 不是一个方法),遇到错误而终止运行。

这说明在第一次调用fn()的同时,var fn 变量没有做为全局对象的一个属性而存在,且 fn 引用的匿名函数上下文也没有被初始化,所以在他之前调用失败。

代码如下:

// 现在先把之前的调用逻辑给注释掉,再看下控制台的输出
//  console.log('之前调用开始..');
//  fn();
//  console.log('之前调用结束..');
  var fn = function () {
    console.log('fn 函数【表达式】声明执行..')
    // code..
  }
  console.log('之后调用开始..');
  fn(); // 在表达式之后调用
  console.log('之后调用开始..');

控制台打印结果:

浅谈javascript 函数表达式和函数声明的区别

可以看出,在该表达式函数之后来调用是可以的,来总结下那是为什么呢?

总结:

1:首先变量本身不做为一个函数存在,而是一个匿名函数的引用(值类型的不属于引用)

2:在代码执行阶段,初始化全局上下文时,它没有被做为全局的一个属性而存在,所以不会造成变量对象的污染

3:该类型的声明一般在插件的开发比较常见,也可做为闭包中回调函数的调用

所以 function fn () {} 并不等于 var fn = function () {} ,他们有本质上的区别。

以上就是本文的全部内容了,思路很清晰,对比也很明确,是篇非常不错的文章,小伙伴们一定要仔细研读下

Javascript 相关文章推荐
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
react build 后打包发布总结
Aug 24 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 #Javascript
jQuery实现二级下拉菜单效果
Jan 05 #Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 #Javascript
jquery中ajax处理跨域的三大方式
Jan 05 #Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 #Javascript
多个js毫秒倒计时同时进行效果
Jan 05 #Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP学习 运算符与运算符优先级
2008/06/15 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
js实现数字滚动特效
2019/12/16 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
解决Python传递中文参数的问题
2015/08/04 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
大学军训感言300字
2014/03/09 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
骨干教师事迹材料
2014/12/17 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL