前端开发

我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题。比如先来一个简单一点的。 console.log(a); // 这里会打印出什么？ var a = 20; 暂时先不管这个例子，我们先引入一个JavaScript中最基础，但同时也是最重要的一个概念执行上下文（Execution Context）。 每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。 全局环境：JavaScript代码运行起来会首先进入该环境 函数环境：当函数被调用执行时，会进入当前函数中执行代码 eval（不建议使用，可忽略） 因此在一个JavaScript程序中，必定会产生多个执行上下文，在我的上一篇文章中也有提到，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。 当代码在执行过程中，遇到以上三种情况，都会生成一个执行上下文，放入栈中，而处于栈顶的上下文执行完毕之后，就会自动出栈。为了更加清晰的理解这个过程，根据下面的例子，结合图示给大家展示。 执行上下文可以理解为函数执行的环境，每一个函数执行时，都会给对应的函数创建这样一个执行环境。 var color = 'blue'; function changeColor() { var anotherColor = 'red'; function swapColors() { var tempColor = anotherColor; anotherColor = color; color = tempColor; } swapColors(); } changeColor(); 我们用ECStack来表示处理执行上下文组的堆栈。我们很容易知道，第一步，首先是全局上下文入栈。 全局上下文入栈之后，其中的可执行代码开始执行，直到遇到了changeColor() ，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。 changeColor的上下文入栈之后，控制器开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。 在swapColors的可执行代码中，再没有遇到其他能生成执行上下文的情况，因此这段代码顺利执行完毕，swapColors的上下文从栈中弹出。 swapColors的执行上下文弹出之后，继续执行changeColor的可执行代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样，ECStack中就只身下全局上下文了。 全局上下文在浏览器窗口关闭后出栈。 注意：函数中，遇到return能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。 详细了解了这个过程之后，我们就可以对执行上下文总结一些结论了。 单线程 同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待 全局上下文只有唯一的一个，它在浏览器关闭时出栈 函数的执行上下文的个数没有限制 每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。 为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。 function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。 最后留一个简单的例子，大家可以自己脑补一下这个例子在执行过程中执行上下文的变化情况。 var name = "window"; var p = { name: 'Perter', getName: function() { // 利用变量保存的方式保证其访问的是p对象 var self = this; return function() { return self.name; } } } var getName = p.getName(); var _name = getName(); console.log(_name); 常见考点 执行上下文的定义 什么是执行上下文？它在 JavaScript 中有哪些类型？ 执行上下文在代码执行时是如何被创建和销毁的？ 执行上下文的生命周期 执行上下文的创建和执行过程有哪些阶段？（例如，创建阶段和执行阶段） 请描述执行上下文在创建阶段进行的三个步骤：变量对象的创建、作用域链的建立、this 的绑定。 变量对象（Variable Object） 什么是变量对象？它在执行上下文中的作用是什么？ 变量提升是如何与变量对象关联的？在函数声明和变量声明时有何不同？ 作用域链 执行上下文是如何通过作用域链来访问变量的？ 请解释在嵌套函数的情况下，作用域链是如何建立的？ this 绑定 在不同的执行上下文中，this 的值是如何确定的？（例如，全局上下文、函数上下文、箭头函数） 如何解释在不同函数调用方式下 this 的指向差异？ 执行上下文栈 什么是执行上下文栈？它如何管理代码执行的顺序？ JavaScript 引擎如何利用执行上下文栈来实现函数的嵌套调用和返回？ 块级作用域的影响 ES6 中引入的 let 和 const 是如何影响执行上下文的？ 如何解释块级作用域在执行上下文中的特殊处理？ 常见问题与调试 如何通过理解执行上下文来排查变量未定义、this 指向错误等常见问题？ 请解释某个你遇到的实际问题，以及如何通过分析执行上下文来解决它的。

HTML 元素的属性是用于控制元素行为或样式的附加信息。 以下是一些常见的 HTML 属性： 1. 通用属性（Global Attributes） 这些属性几乎可以应用于所有 HTML 元素： id：元素的唯一标识符，用于 JavaScript 或 CSS 选择。 <div id="main"></div> class：为元素指定一个或多个类名，用于 CSS 样式或 JavaScript 操作。 <div class="container header"></div> style：为元素设置内联样式。 <div style="color: red;"></div> title：为元素提供额外信息，当鼠标悬停在元素上时显示。 <button title="Click me!">Click</button> data-*：自定义属性，用于存储私有数据，以 data- 为前缀，可以通过 JavaScript 访问。 <div data-user-id="123"></div> 2. 事件属性（Event Attributes） 这些属性用于处理元素上的事件： onclick：定义单击事件处理函数。 <button onclick="alert('Clicked!')">Click me</button> onmouseover：鼠标悬停时触发的事件。 <div onmouseover="console.log('Mouse over')"></div> onkeydown：按下键盘时触发的事件。 <input type="text" onkeydown="handleKeyDown(event)"> 3. 表单相关属性 type：定义输入框类型，例如 text、password、email 等。 <input type="text"> name：定义表单元素的名称，用于表单提交。 <input type="text" name="username"> value：定义表单元素的默认值。 <input type="text" value="Default value"> placeholder：为输入框提供占位符文本，提示用户输入。 <input type="text" placeholder="Enter your name"> disabled：禁用输入元素，使其不可交互。 <input type="text" disabled> required：标记表单元素为必填项。 <input type="text" required> 4. 链接和资源加载属性 href：用于指定超链接的目标 URL。 <a href="https://example.com">Go to example.com</a> src：指定图像、脚本或其他资源的路径。 <img src="image.jpg" alt="Image description"> alt：为图像提供替代文本，图像无法加载时显示。 <img src="image.jpg" alt="Alternative text"> rel：指定链接与目标文档的关系，常用于 link 标签和 a 标签。 <link rel="stylesheet" href="style.css"> target：定义链接的打开方式，常用值包括 _self（当前窗口）和 _blank（新窗口）。 <a href="https://example.com" target="_blank">Open in new tab</a> 5. 多媒体属性 controls：为 <audio> 或 <video> 元素添加播放控件。 <video src="video.mp4" controls></video> autoplay：自动播放音频或视频。 <audio src="audio.mp3" autoplay></audio> loop：音频或视频播放完后重新开始播放。 <video src="video.mp4" loop></video> muted：自动静音视频或音频。 <audio src="audio.mp3" muted></audio> 6. 图像和媒体相关属性 width 和 height：定义图像或视频的宽度和高度。 <img src="image.jpg" width="200" height="100"> 7. iframe 属性 src：定义嵌入的网页 URL。 <iframe src="https://example.com"></iframe> sandbox：为嵌入内容提供更严格的限制，控制 iframe 的行为。 <iframe src="https://example.com" sandbox></iframe> 8. 语义化属性 role：为屏幕阅读器和辅助技术提供语义化描述。 <div role="navigation"></div> 9. 布局和可访问性属性 hidden：隐藏元素，元素不会显示在页面中。 <div hidden>This content is hidden</div> tabindex：定义元素的 tab 键导航顺序。 <button tabindex="1">First</button> <button tabindex="2">Second</button> 常见考点 1. 全局属性（Global Attributes） class：用于给元素指定样式类，如何使用多个类？有哪些常见用法？ id：唯一标识元素，id 的作用和注意事项。 style：内联样式的作用及其优先级。 title：为元素提供额外信息（鼠标悬停时显示）。 data- 属性*：自定义数据属性，如何在 JavaScript 中访问 data-* 属性？ 2. 事件属性（Event Attributes） onclick、onmouseover 等事件处理属性。 如何使用事件属性进行事件绑定？ 事件属性和 JavaScript 事件监听器（addEventListener）的区别和应用场景。 3. 表单属性 name：用于提交表单数据时作为键名。 action：表单提交的目标 URL。 method：表单的提交方式（GET 或 POST）。 autocomplete：是否启用表单自动填充。 required、pattern、min/max 等 HTML5 校验属性。 4. 输入控件相关属性 value：为输入控件设置默认值。 placeholder：为输入框提供提示文本。 disabled：禁用输入控件。 readonly：只读属性，控件不能被修改。 maxlength/minlength：输入字符长度的限制。 accept：文件上传时，限制允许的文件类型（适用于 <input type="file">）。 5. 媒体元素属性 src：媒体文件的路径（适用于 <img>、<audio>、<video> 等）。 alt：图片无法加载时显示的替代文本。 controls：是否为媒体文件显示默认控制条。 autoplay：媒体文件是否自动播放。 loop：媒体文件是否循环播放。 muted：媒体文件是否静音。 6. 超链接相关属性 href：链接目标的 URL。 target：定义链接打开的方式（如 _blank 打开新窗口）。 download：允许下载链接资源，而不是导航到资源。 rel：定义链接与当前文档的关系（如 nofollow、noopener）。 7. iframe 属性 src：嵌入的文档或网页的 URL。 sandbox：启用或禁用特定行为（如禁止脚本、表单提交等）。 allow：控制 iframe 内的权限（如允许摄像头、麦克风访问）。 8. 图像和图形属性 srcset：为不同设备提供不同分辨率的图像资源。 sizes：配合 srcset，定义不同视口下图像显示的尺寸。 usemap：指定图片使用的图像映射。 height/width：定义图片或其他元素的高度和宽度。 9. meta 标签属性 charset：指定文档的字符编码（如 UTF-8）。 name 和 content：为文档提供元信息（如 description, viewport）。 http-equiv：配合 content，定义 HTTP 头信息（如 refresh, Content-Type）。 10. 无障碍相关属性 aria- 属性*：为无障碍工具（如屏幕阅读器）提供更多语义信息。 role：指定元素的功能角色，增强无障碍性。 11. iframe 和图片的懒加载 loading=“lazy”：为图片和 iframe 启用懒加载。 12. 语言和方向属性 lang：指定元素或页面的语言（如 lang="en"）。 dir：指定文本的书写方向（如 ltr 左到右，rtl 右到左）。

什么是 font 属性？ 在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。 font 属性的语法 font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; 各个属性的详细说明 font-style：设置字体的样式。 取值： normal：正常字体（默认值）。 italic：斜体字。 oblique：倾斜字体。 font-variant：设置字体的变体。 取值： normal：正常（默认值）。 small-caps：小型大写字母。 font-weight：设置字体的粗细。 取值： normal：正常粗细（默认值）。 bold：加粗。 bolder：比父元素更粗。 lighter：比父元素更细。 数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。 font-size：设置字体的大小。 取值： 可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。 line-height：设置行高。 取值： 可以使用数值、单位（如 px、 em）或百分比。 font-family：设置字体系列。 取值： 可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。 例如： "Arial", "Helvetica", sans-serif。 使用 font 属性的注意事项 font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。 如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。 实例：使用 font 属性设置文本样式 HTML 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font 属性示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="title">欢迎来到我的网站</h1> <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p> </body> </html> CSS 代码（styles.css） body { font-family: Arial, sans-serif; /* 设置全局字体 */ } .title { font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */ color: #333; /* 字体颜色 */ } .description { font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */ color: #666; /* 字体颜色 */ } 解释 HTML结构：我们创建了一个包含标题和描述的简单网页。 CSS样式： 在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。 在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。 结果 通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。 ...

一、 watch API 我们先看看 watch的使用例子,watch 有多种用法，可以接收多种类型参数: import { reactive, watch } from 'vue' // 1. 传入getter函数 const state = reactive({ count: 0 }) watch(() => state.count, (count, prevCount) => { // 当 state.count 更新，会触发此回调函数 }) // 2. 传入reactive对象 watch(state, (count, prevCount) => { // 当 state.count 更新，会触发此回调函数 }) // 3. 传入ref对象 const stateRef = ref(0) watch(stateRef, (count, prevCount) => { // 当 stateRef.value 更新，会触发此回调函数 }) // 4.监听多个数据源，回调函数接受两个数组，分别对应来源数组中的新值和旧值： watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => { /* ... */ }) 从上面的例子可以看到，对于 watch，它能接收的第一个参数类型非常多。 你可以传入一个ref对象、一个响应式对象、一个 getter 函数、甚至是一个数组。 我们在上一篇中知道了computed对象其内部是借助了 effect函数 创建了一个 reactiveEffect函数，在访问computed对象的值时，执行其 runner函数 求值。 ...

从一个安全漏洞说起 Lodash 是一款非常流行的 npm 库，每月的下载量超过 8000 万次，GitHub 上使用它的项目有超过 400 万。之前有段时间， Lodash 的一个安全漏洞刷爆了朋友圈，我们先来回忆下这个安全漏洞： 攻击者可以通过 Lodash 的一些函数覆盖或污染应用程序。例如：通过 Lodash 库中的函数 defaultsDeep 可以修改 Object.prototype 的属性。 我们都知道，JavaScript 在读取对象中的某个属性时，如果查找不到就会去其原型链上查找。试想一下，如果被修改的属性是 toString 方法： const payload = '{"constructor": {"prototype": {"toString": true}}}' _.defaultsDeep({}, JSON.parse(payload)) 每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 [object type]，其中 type 是对象的类型。如果覆盖了 toString() 方法，那么给应用带来的影响就是非常大的。 其实上述的问题就属于一个很常见的安全漏洞 —— 原型污染 原型污染：攻击者通过某种手段修改 JavaScript 对象的原型（prototype） 然而这并不是 Lodash 第一次爆出安全漏洞了。事实上，像这样的安全漏洞还可能存在于我们使用的千千万万个不同的开源依赖中，如果我们平时不重视他们，一旦出现问题对我们的项目造成的损失是不可估计的。这相当于你的项目中埋着很多不知道什么时候就会爆炸的炸弹。 安全调查 其实开发人员对开源代码的安全性的信任程度要大于对自己编写的代码的安全性的信任程度，但是在确保代码安全性和质量的工具还有很多不足之处。在 npm 还没有一个完善的安全检测机制之前，npm 和 NodeJs 团队曾经对数万名 JavaScript 开发者发起过一个调查，第一个问题就是安全问题，具体就是开发人员如何看待他们编写的代码和所使用的开源项目的安全性。 调查结果显示：全球 97％ 的 JavaScript 开发人员在自己开发的项目中都依赖开源代码，77％ 的开发人员对他们使用的开源代码是否安全表示担忧。更有趣的是，有 87％ 的人表示担心自己的代码的安全性。 ...

解构赋值概念 解构赋值语法是一种 Javascript 表达式。 通过解构赋值，可以将属性/值从对象/数组中取出,赋值给其他变量。 解构赋值是通过将结构中的各元素复制到变量中来达到“解构”的目的。但对象/数组本身不会被修改。 数组解构 基本使用 📖 可以在定义变量的同时，使用解构进行赋值 let [one, two, three] = foo; //等同于 let one = foo[0]; let two = foo[1]; let three = foo[2]; 📖 也可以先声明变量，在进行解构赋值 设置默认值 当【左边≠右边】时，可以先设置一个默认值，否则取不到值的变量会变成undefined 剩余值处理 可以使用三个点 "..."+ 参数来接收剩余的所有元素，变量名称随意，必须在最后一个参数的位置上 进阶用法 🎨 可以和split 函数结合使用，比如 let [Mother,Father] = "judy,pete".split(','); console.log(Mother) //judy console.log(Father) //pete 🎨 可以使用逗号忽略元素，比如 let [name1,,name3] = ["Julius01", "Caesar02", "Consul03"] 🎨 可以直接赋值给对象的属性，比如 let user = {}; [user.name, user.surname] = ["Ilya","Kantor"] ...

3D球场项目 (五) 把客户端的核心业务流 讲完了：Native 推送 → DataManager 队列 → ScenePlayer 章节调度 → GameController 状态机 → Handler → 渲染层。功能闭环跑通之后，真正的硬仗是 “工程化"和"性能”——前者保证 项目能稳定上线（编译跑通、退出不崩、Swift 调用顺手），后者保证在中低端机上画面流畅。 第一版上线时遇到了两类问题： 稳定性 / 工程化：modulemap 编译报错、lipo 架构冲突、A11 设备启动 crash、 Cocos 退出期 OpenAL 资源竞争 crash……这些都不是"画面卡"，但每一个都能让用户体验 归零； 性能：中端 iPhone 在比赛回合渲染期间，GPU 和 CPU 都偶尔抖到 80%+，帧率掉到 30 fps 出头。 本篇按这两类拆成两部分，所有改动都遵循一条原则：不动玩法，只把工程问题和帧时间 解决掉。 架构改动一览 3D球场项目 (二) 介绍过弹幕引擎的四层 架构（腾讯视频 APP / MagicDanmakuiOS / MagicDanmaku / cocos-engine）。这一阶段 每一层都动了——3D 球场不是单点改造，而是一次自上而下的纵贯。下面这张图是把 PartTwo 那张原始架构图重画一遍，改动的节点用蓝色、新增的节点用绿色， 没动的节点保持白色： ...

规范化是前端工程化的一个重要部分。现在，有许多工具能够辅助我们实行代码的规范化,比如你一定知道的 ESLint 和 Prettier。 今天，来聊聊这些工具的工作原理和基本使用，了解它们是如何发挥作用的，以及如何更好地利用这些工具去规范项目的代码。 1. ESlint - 检查你的 JavaScript 代码 让我们先从知名度最高的 ESLint 开始。 1.1. ESLint 及其作用 Lint 是一类专门用于检查代码的工具软件， 也称 linter。ESLint ，即 JavaScript （ECMAScript）代码的检查工具。 正如官网的介绍 —— “Find and fix problems in your JavaScript code”，ESLint 能够辅助查找出你的 JavaScript 代码中的问题，包括： 代码风格问题（styles）。比如，运算符两边的空格、语句末尾的分号。 不好的写法。比如，使用 == 进行比较而不是 ===。 可能存在逻辑问题的代码模式。比如，定义了一个变量，但没有使用到它。 此外，ESLint 还能够帮你自动修复一些简单的问题。 我们将在下一小结学习如何使用 ESLint 检查我们的 JavaScript 代码，并修复其中的一些问题。 1.2. ESLint 快速上手 为了在项目中使用 ESLint，需要先安装它。 # 初始化一个 npm 项目 mkdir eslint-test cd eslint-test npm init -y # 安装 eslint npm init @eslint/config 回答一系列问题后，你可以看目录中的配置文件 .eslintrc.js，这个配置文件告诉 ESLint 如何去解析项目，这个项目采用了哪些规范和规则。 ...

先看看React官网对于Context的介绍 Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。 个人理解转成大白话：Context提供了一个局部的全局作用域，使用Context则无需再手动的逐层传递props。 本文主要介绍3种Context的使用方式： React.createContext提供的Provider和Consumer 函数组件：React.createContext提供的Provider和useContext钩子 Class组件：React.createContext提供的Provider和class的contextType属性 第一种：React.createContext提供的Provider和Consumer 先写好使用Context的基础环境条件，后续的代码都是基于此环境 //创建一个文件，暂且命名为context.js，导出createContext()的返回值 import { createContext } from "react"; export default createContext(); 在根组件App.jsx中，导入上面写的context，并使用context提供的Provider组件进行包裹，圈定局部的全局作用域，传值后可以提供给子组件进行消费 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。 import React, { createContext } from "react"; import MyContext from "./context"; import GeneralC from "./GeneralC"; import FnC from "./FnC"; import ClassC from "./ClassC"; export default function App() { return ( //Provider组件接收一个value属性，此处传入一个带有name属性的对象 <MyContext.Provider value={{ name: `context's value is string!` }}> {/*这里写后面要进行包裹的子组件,此处先行导入后续需要消费context的3个组件*/} <GeneralC/> <hr/> <FnC/> <hr/> <ClassC/> </MyContext.Provider> ); } 在GeneralC组件中,导入context,使用其提供的Consumer组件来订阅Context的变更,需要一个函数作为子元素,函数的第一个形参便是Provider组件提供的value值 import React, { useReducer } from "react"; import MyContext from "./context"; const GeneralC = () => { return ( // <MyContext.Consumer> {(value) => { return ( <div> 第一种使用Context方式获取的值：{JSON.stringify(value)} </div> ); }} </MyContext.Consumer> ); }; export default GeneralC; 此时页面中应该出现json格式的value值 ...

这篇文章要给大家介绍的是变量对象。 在JavaScript中，我们肯定不可避免的需要声明变量和函数，可是JS解析器是如何找到这些变量的呢？我们还得对执行上下文有一个进一步的了解。 在知识点《执行上下文》中，我们已经知道，当调用一个函数时（激活），一个新的执行上下文就会被创建。而一个执行上下文的生命周期可以分为两个阶段。 创建阶段 在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。 代码执行阶段 创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。 从这里我们就可以看出详细了解执行上下文极为重要，因为其中涉及到了变量对象，作用域链，this等很多人没有怎么弄明白，但是却极为重要的概念，它关系到我们能不能真正理解JavaScript。在后面的文章中我们会一一详细总结，这里我们先重点了解变量对象。 变量对象（Variable Object） 变量对象的创建，依次经历了以下几个过程。 建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。 检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。 检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。 许多读者在阅读到这的时候会因为下面的这样场景对于“跳过”一词产生疑问。既然变量声明的foo遇到函数声明的foo会跳过，可是为什么最后foo的输出结果仍然是被覆盖了？ function foo() { console.log('function foo') } var foo = 20; console.log(foo); // 20 其实只是大家在阅读的时候不够仔细，因为上面的三条规则仅仅适用于变量对象的创建过程。也就是执行上下文的创建过程。而foo = 20是在执行上下文的执行过程中运行的，输出结果自然会是20。对比下例。 console.log(foo); // function foo function foo() { console.log('function foo') } var foo = 20; // 上栗的执行顺序为 // 首先将所有函数声明放入变量对象中 function foo() { console.log('function foo') } // 其次将所有变量声明放入变量对象中，但是因为foo已经存在同名函数，因此此时会跳过undefined的赋值 // var foo = undefined; // 然后开始执行阶段代码的执行 console.log(foo); // function foo foo = 20; 根据这个规则，理解变量提升就变得十分简单了。在很多文章中虽然提到了变量提升，但是具体是怎么回事还真的很多人都说不出来，以后在面试中用变量对象的创建过程跟面试官解释变量提升，保证瞬间提升逼格。 在上面的规则中我们看出，function声明会比var声明优先级更高一点。为了帮助大家更好的理解变量对象，我们结合一些简单的例子来进行探讨。 // demo01 function test() { console.log(a); console.log(foo()); var a = 1; function foo() { return 2; } } test(); 在上例中，我们直接从test()的执行上下文开始理解。全局作用域中运行test()时，test()的执行上下文开始创建。为了便于理解，我们用如下的形式来表示 ...