揭秘 JavaScript 函数表达式

 揭秘 JavaScript 函数表达式

 

  赋值给变量的函数称为函数表达式。如果您还没有阅读过 JavaScript 中的函数,我建议您在继续阅读之前先阅读本文。让我们试着借助一个例子来理解函数表达式。

var counter = 0
var incrementCounterAndPrint = function () {
  counter++;
  console.log("Incremented Counter", counter);
}
incrementCounterAndPrint()

揭秘 JavaScript 函数表达式

  当 JS 引擎遇到这段代码时,首先它会创建一个全局执行上下文并启动创建阶段。在创建阶段,它会遍历所有的声明语句并将它们放入内存中。在这种情况下,变量`反`和` incrementCounterAndPrint `将被存储在具有缺省值内存,`undefined`分配给它。 

揭秘 JavaScript 函数表达式

      由于没有更多的声明语句,它将进入第二阶段,即执行阶段。执行阶段是代码逐行执行的阶段。在这种情况下,首先,`计数器`将被分配到的值` 0 `和`incrementCounterAndPrint`将与作为值的整个功能被分配。当 JS 引擎遇到语句 ` incrementCounterAndPrint() ` 时,它会首先检查内存是否存在这个特定变量。由于它存在,它将从内存中获取值并执行它。在执行函数时,函数` incrementCounterAndPrint` 将被推送到调用堆栈并创建一个新的函数执行上下文。一旦创建了执行上下文,它将启动创建阶段。由于没有这样的声明语句,它将进入称为执行阶段的第二阶段。在这个阶段,首先 JS 引擎会执行语句 ` counter++ `。在执行时,它会检查变量是否存在于本地内存中,如果不存在,它将移动到全局执行上下文并检查它的内存。一旦找到变量,它就会执行操作并移动到下一行。在执行该语句`的console.log(“增加计数器”,计数器) `,它会打印出值' 1 '到控制台。

        现在,显而易见的问题是函数表达式是否被提升?好吧,让我们通过调整上面的代码来检查一下。

 var counter = 0
incrementCounterAndPrint() // TypeError: incrementCounterAndPrint 不是函数
var incrementCounterAndPrint = function () {
counter++;
控制台日志(“增量计数器”,计数器);
}

         当 JS 引擎运行上面的代码时,它会抛出一个类型错误。你能告诉我为什么会这样吗?好吧,如果我们尝试观察代码,我们可以看到该函数被赋值给变量 ` incrementCounterAndPrint`。在根据提升功能的创建阶段,所有变量声明都将移到顶部,而将分配给它的值留在后面。在这种情况下,` incrementCounterAndPrint ` 将被移动到顶部,留下函数代码,并且默认设置为一个值 ` undefined `,因为它是使用 ` var`声明的。当JS引擎遇到语句` incrementCounterAndPrint()` 将首先检查变量的内存。由于它存在,它将获取存储的值,即“未定义”。由于 undefined 不是 ` function`类型,它会抛出一个类型错误。这使我们得出结论,函数表达式没有被提升。函数表达式有其作用域。函数表达式通常是匿名的,但我们也可以给它命名,这对调试有很大帮助。

七爪网七爪网-专注于分销商城,小程序定制,网站开发,定制开发,成品源码的源码交易平台

   

 

上一篇:揭秘 JavaScript 函数表达式


下一篇:leetcode常用函数刷题必备(一)