脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → javascript函数声明和函数表达式区别分析

javascript函数声明和函数表达式区别分析

 更新时间：2014年12月02日 11:18:25   投稿：hebedich  
本文向大家展示了javascript中函数声明和函数表达式的概念及区别，介绍的非常全面，也很详尽，这里推荐给大家

　　平时再用js写函数的时候，一般都是以惯例 function fn () {} 的方式来声明一个函数，在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建，究竟他们用起来有什么区别呢，今天就本着打破砂锅问到底的精神，好好来说说这个让人神魂颠倒的--函数声明。

函数声明

　　函数声明示例代码

复制代码 代码如下:

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

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

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

　　控制台输出结果：

　　是的，此时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('之后调用开始..');

　　控制台打印结果：

　　可以看到代码在执行到第一次调用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('之后调用开始..');

　　控制台打印结果：

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

总结：

　　1：首先变量本身不做为一个函数存在，而是一个匿名函数的引用（值类型的不属于引用）

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

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

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

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

您可能感兴趣的文章:

相关文章

  • 全面理解JavaScript中的闭包

    全面理解JavaScript中的闭包

    将外部作用域中的局部变量封闭起来的函数对象称为闭包(Closure),被封闭起来的变量与封闭它的函数对象有相同的生命周期,这在JavaScript中比较难理解而且十分重要,接下来带大家一起来全面理解JavaScript中的闭包:
    2016-05-05
  • javascript编程起步（第七课）

    javascript编程起步（第七课）

    javascript编程起步（第七课）...
    2007-02-02
  • js 页面输出值

    js 页面输出值

    下面的方法是常用的向html页面中输入值，一般是将要输出的内容放到别的js文件中，调用。这里只是测试。
    2008-11-11
  • 菜鸟javascript基础整理1

    菜鸟javascript基础整理1

    JavaScript 基础基础，虽然基础但是很实用。
    2010-12-12
  • 如何编写高质量JS代码

    如何编写高质量JS代码

    这篇文章主要介绍了如何编写高质量JS代码的方法及相关资料,需要的朋友可以参考下
    2014-12-12
  • 详解JavaScript的while循环的使用

    详解JavaScript的while循环的使用

    这篇文章主要介绍了详解JavaScript的while循环的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • javascript学习笔记(五) Array 数组类型介绍

    javascript学习笔记(五) Array 数组类型介绍

    javascript学习笔记之Array 数组类型介绍，需要的朋友可以参考下
    2012-06-06
  • ES6基础语法之模块化介绍

    ES6基础语法之模块化介绍

    这篇文章介绍了ES6基础语法之模块化，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • ES6基础语法之函数介绍

    ES6基础语法之函数介绍

    这篇文章介绍了ES6中函数的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • JavaScript学习笔记之内置对象

    JavaScript学习笔记之内置对象

    本文主要介绍了javascript中的内置对象，包括图像对象、导航对象、窗口对象、屏幕对象、事件对象、历史对象、文件对象(重要)、锚点对象、链接对象、框架对象、表单对象(重要)、位置对象，这里简单做下介绍，后续在详细讲解。
    2015-01-01

最新评论