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 () {} ，他们有本质上的区别。

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

赞 (0)

相关推荐

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

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

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • JavaScript中的函数声明和函数表达式区别浅析

    记得在面试腾讯实习生的时候,面试官问了我这样一道问题. 复制代码 代码如下: //下述两种声明方式有什么不同   function foo(){};   var bar = function foo(){}; 当初只知道两种声明方式一个是函数声明一个是函数表达式,具体有什么不同没能说得很好.最近正好看到这方面的书籍,就想好好总结一番. 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终

  • javascript 函数声明与函数表达式的区别介绍

    还是一样,先上代码: 复制代码 代码如下: <script> var f = function g() { return 1; }; if (false) { f = function g(){ return 2; }; } alert(g()); // 2 </script> 把这段代码扔到IE 6 里面和chorme里面是完全不同的两种效果. 这里输出2 是在ie6里面的效果,如果在chorme会出现g没有定义. 这也算是JScript的bug吧. 在这里很明显,这里的只是定义

  • 浅析javascript中函数声明和函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • 详解JavaScript中的函数声明和函数表达式

    JavaScript 中需要创建函数的话,有两种方法:函数声明.函数表达式,各自写法如下: // 方法一:函数声明 function foo() {} // 方法二:函数表达式 var foo = function () {}; 另外还有一种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行: (function () { // var x = ... })(); 此种自执行函数表达式归类于以上两种方法

  • JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同

    函数表达式和函数声明 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明: function 函数名称 (参数:可选){ 函数体 } 函数表达式: function 函数名称(可选)(参数:可选){ 函数体 } 所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函

  • JavaScript中函数声明与函数表达式的区别详解

    前言 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略.下面看看这两者的详细区别介绍. 什么是 Function Declaration(函数声明)? Function Declaration 可以定义命名的函数变量,而无需给变量赋值.Function Declaration 是一种独立的结构,不能

  • 理解 javascript 中的函数表达式与函数声明

    理解 javascript 中的函数表达式与函数声明

    常用闭包的同学肯定很清楚下面一段代码: //通常的闭包写法 (function () { ... }()) 那么我们的问题来了,为什么要在 function () {...}() 之外用圆括号包裹呢?解答这个问题,就需要我们理解 Javascript 中函数表达式与函数声明的概念. 函数定义带来的错误 虽然 function () {...} 看上去像是一个函数声明,但是由于没有函数名,它的本质其实是一个函数表达式.我们看下规范中对于函数声明与函数表达式的定义: 可以看出来,函数声明是必须带有函

  • Javascript中的函数声明与函数表达式(奇技淫巧)

    举一个例子: ~function() { alert("hello, world."); }(); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 试一下就知道这段代码的意思就是声明一个函数,然后立刻执行,因为Javascript中的变量作用域是基于函数的,所以这样可以避免变量污染,但这里的位运算符"~"乍一看让人摸不到头脑,如果去掉它再运行则会报错:SyntaxError. 在阐述为什么之前,让我们先来明确Javascript中的两个概念:函数声明和函

  • Javascript学习笔记之 函数篇（一） : 函数声明和函数表达式

    函数声明 function foo() {} 函数 foo 将会在整个程序执行前被 hoist (提升),因此它在定义 foo 函数的整个 scope (作用域)中都是可用的.即使在函数定义之前调用它也没问题. foo(); // Works because foo was created before this code runs function foo() {} 因为我打算专门写篇介绍作用域的文章,所以这里就不详述了. 函数表达式 对于函数声明,函数的名称是必须的,而对于函数表达式而言则是

  • js中函数声明与函数表达式

    目前为止,我们一直没有对函数声明和函数表达式加以区别.而实际上,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问):至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行.如下例子: 复制代码 代码如下: alert(sum(10,10)); function sum(num1,num2) {     return num1+num2; } 以上代码完全可以正确执行,因为在代码开始执行之前,解析

随机推荐