函数声明和函数表达式

声明和赋值

js 复制代码
var myName = 'Lily'

上面这段代码可以看成是两行代码组成的:

js 复制代码
var myName //声明部分
myName = 'Lily' // 赋值部分

函数声明

js 复制代码
function foo() {
    console.log('foo')
}

函数foo是一个完整的函数声明,没有涉及到赋值操作

函数表达式

首先,分析下面这段代码

js 复制代码
var bar = function () { 
    console.log('bar')
 }

当执行这段代码的时候,V8在编译阶段会先查找声明语句,你可以把这段代码拆分为下面两行代码

js 复制代码
var bar = undefined
bar = function () {
    console.log('bar')
}

第一行是声明语句,所以V8在解析阶段,就会在作用域中创建该对象,并且将该对象设置为undefined,第二行是赋值/表达式,在编译阶段,V8并不会处理函数表达式,所以也就不会将该函数表达式提升到作用域中了。

变量提升

所谓的变量提升,是指在JavaScript代码执行过程中,JavaScrpt引擎把变量的声明部分和函数的声明部分提升到代码开头的"行为"。

对于变量提升,如果是一个普通变量,变量提升之后都是undefined,如果是声明的函数,那么变量提升之后的值则是函数对象。

在编译阶段,如果解析到函数声明, 那么V8会将这个函数声明转换为内存中的函数对象,并将其放在作用域中。

JavaScript执行流程

  • 首先JavaScript引擎会将代码中声明的变量和函数保存到执行上下文的变量环境中(编译阶段);
  • 然后JavaScript引擎会把声明之外的代码编译为字节码(编译阶段);

输入一段代码,经过编译后,会生成两部分内容:执行上下文(Execution context)和可执行代码。
执行上下文是JavaScript执行一段代码时的运行环境。

  • 最后JavaScript引擎执行"可执行代码"(执行阶段)。

测试题

js 复制代码
var fun = function (x, y) {
    return x - y 
}

function fun (x, y) {
    return x + y
}

console.log(fun(4, 3))

这道题目的最终输出是:1

执行过程分析:

  • 编译阶段,编译第一行代码时,会将变量fun的声明(var fun = undefined)保存在执行上下文的变量环境中;
  • 编译阶段,编译第五行代码时,会将函数fun声明保存在变量环境中,此时函数名fun与变量名fun重名,所以fun会被重新声明为函数对象。
  • 编译阶段,将声明之外的代码编译成字节码
  • 执行阶段,执行第一行代码时,将变量fun赋值为function(x, y) { return x -y }
  • 执行阶段,执行第五行时声明语句,应该不会编译为可执行代码
  • 执行阶段,调用fun函数,
  • 所以最终输出为1
相关推荐
默_笙4 小时前
🚋 从流水线到地铁网:为什么复杂 AI 都要拆成多 Agent(上)——LangGraph 基础入门
前端·javascript
ID34610744205 小时前
【课程设计】基于Spring Boot+Vue的游戏账号租赁系统的设计与实现-计算机毕设 附源码50345
javascript·vue.js·spring boot·python·node.js·php·课程设计
柚yuzumi5 小时前
彻底搞懂 JavaScript 类型转换:显式转换、隐式转换与 ToPrimitive
前端·javascript·node.js
AI情绪识别开源6 小时前
检信ALLEMOTION 认知评估分析器 · WebSocket 推送数据文档
javascript
OpsEye6 小时前
公司内部全员使用 AI,如何保证会话合规、行为可审计?
javascript·ai编程
变与不变8067 小时前
JS事件机制精讲
前端·javascript
沉迷...7 小时前
Git skip-worktree 使用笔记(本地忽略配置文件)
javascript·git
志尊宝9 小时前
Vue3 零基础每日笔记(032):Suspense 与异步组件——懒加载与顶层 await 终极方案
前端·javascript·vue.js·笔记·html5
是立不是利10 小时前
前端分页逻辑与边界场景实战解析
前端·javascript