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

Kerr1Gan 发布于2019-08-22 18:43 / 310人阅读

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

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("函数声明");
}
函数声明

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 2019-08-20 15:28 评论0 收藏0
【渗透】关于Javascript的函数声明和函数表达式

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

zhaochunqi 2019-08-22 18:26 评论0 收藏0
JavaScript—— 函数声明和函数表达式有什么不同吗？

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

FleyX 2019-08-20 16:36 评论0 收藏0
js中(function(){…})()立即执行函数写法理解

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

YJNldm 2019-08-21 10:36 评论0 收藏0
先有蛋还是先有鸡？JavaScript 作用域与闭包探析

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

elisa.yang 2019-08-21 15:13 评论0 收藏0