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

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

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

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运行时确定，并且在表达式赋值完成后，该函数才能调用

GPU云服务器云服务器函数声明声明式函数提前声明函数复杂函数声明

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

转载请注明本文地址：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