资讯专栏INFORMATION COLUMN

「JavaScript」函数声明和函数表达式

Kerr1Gan / 393人阅读

摘要:函数表达式的值是在运行时确定,并且在表达式赋值完成后,该函数才能调用

1.定义

在javascript中我们定义函数有以下两种方式:

函数声明

  function say(){
     console.log("函数声明");
  }

函数表达式

   var say = function(){
      console.log("函数表达式");
   }
2.实例解析

在平时开发中,它们有着难以察觉的差别,我们看下下面的例子:

    say();
    var say = function(){
          console.log("函数表达式");
    }
    say();
    function say(){
     console.log("函数声明");
    }
    say();

可以先在脑海中想一下答案,执行结果是:

函数声明
函数表达式
函数表达式

来,我们分析一下这个结果:

1.第一次调用say函数时,函数还未被定义,那为什么可以打印出“函数声明”这个值呢?原因在于

javascript解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。
而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用

因此,即使函数还未被定义,但是函数声明已经被提升到最前面了,上面那段代码相当于:

    var say; //变量被提升,此时的值为undefined
    say();// 函数被提升,输出“函数声明”
    var say = function(){
          console.log("函数表达式");
    }
    say();
    function say(){
     console.log("函数声明");
    }
    say();

从下面两个的对比,更能理解“函数声明提升”这个概念:
1.

var say;
console.log(say);
say();
function say(){
   console.log("函数声明");
}

输出:
f say(){
   console.log("函数声明");
}
函数声明

2.

var say;
console.log(say);
say();
var say = function(){
   console.log("函数表达式");
}

输出:
undefined
Uncaught TypeError: say is not a function
    at :3:1

2.第二次调用say函数时,我们可以先简单理解为此时的函数表达式覆盖了函数声明,因此输出了‘函数表达式’,然而到了第三次调用say函数时,此时打印的竟然还是‘函数表达式’??为什么后面的函数声明没有覆盖前面的函数表达式呢?其实在运行时由于函数声明提升的原因,实际上运行的顺序是类似于这样的:

var say; //函数表达式中的var提前,值为undefined

function say() {
    console.log("函数声明");
}//因为函数声明提升,所以在最前面运行了

say(); //函数声明
say = function() { //给say赋值函数
    console.log("函数表达式");
}
say();//函数表达式
say();//函数表达式
3.总结

1.函数声明在JS解析时进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用。
2.函数表达式的值是在JS运行时确定,并且在表达式赋值完成后,该函数才能调用

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96136.html

相关文章

  • 深入理解javascript中的立即执行函数(function(){…})()

    摘要:要理解立即执行函数,需要先理解一些函数的基本概念。函数表达式使用关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。 ( functio...

    melody_lql 评论0 收藏0
  • 【渗透】关于Javascript函数声明函数达式

    摘要:而函数表达式的值是在运行时确定,并且在表达式赋值完成后,该函数才能调用。 Javascript定义函数有两种类型 函数声明 // 函数声明 function wscat(type){ return type===wscat; } 函数表达式 // 函数表达式 var oaoafly = function(type){ return type===oaoafly; } 先...

    zhaochunqi 评论0 收藏0
  • JavaScript—— 函数声明函数达式有什么不同吗?

    摘要:函数声明和函数表达式的区别函数声明只能出现在程序或函数体内。所以,在等语义为语句的代码块中存在函数声明,由于函数提升特性,会破坏掉原本的语义。 这篇谈一下JS函数声明与函数表达式的区别及要注意的地方: 函数声明主要有两种类型: 函数声明 function fn() {}; 函数表达式 var fn = function () {}; 这两种函数创建方式...

    FleyX 评论0 收藏0
  • js中(function(){…})()立即执行函数写法理解

    摘要:和是两种立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此。 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。 ( function(){…} )...

    YJNldm 评论0 收藏0
  • 先有蛋还是先有鸡?JavaScript 作用域与闭包探析

    摘要:而闭包的神奇之处正是可以阻止事情的发生。拜所声明的位置所赐,它拥有涵盖内部作用域的闭包,使得该作用域能够一直存活,以供在之后任何时间进行引用。依然持有对该作用域的引用,而这个引用就叫闭包。 引子 先看一个问题,下面两个代码片段会输出什么? // Snippet 1 a = 2; var a; console.log(a); // Snippet 2 console.log(a); v...

    elisa.yang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<