一、变量作用域与闭包
变量作用域决定了变量的可访问范围。在 JavaScript 中，有全局作用域和局部作用域。函数内部定义的变量拥有局部作用域，它仅在该函数内可被访问，函数执行完毕，局部变量通常会被销毁。而在函数外部定义的变量则处于全局作用域，在整个脚本中都可访问。例如：
TypeScript取消自动换行复制
let globalVar = '我是全局变量';
闭包是由函数和与其相关的引用环境组合而成的实体。简单来说，当一个函数内部返回另一个函数，且内部函数引用了外部函数的变量时，就形成了闭包。闭包有诸多用途，比如实现数据封装和私有变量。以一个简单的计数器为例：
TypeScript取消自动换行复制
function counter() {
在上述代码中，内部函数记住并访问了外部函数counter中的变量count，即使counter函数已经执行完毕，count变量也不会被销毁，因为闭包的存在。掌握闭包对于理解框架中数据和状态的管理机制至关重要，许多框架利用闭包来实现组件状态的封装和管理。
二、原型与原型链
JavaScript 是基于原型的面向对象语言，与基于类的语言（如 Java、C++）有所不同。每个对象都有一个原型对象，对象可以从原型对象继承属性和方法。当访问一个对象的属性或方法时，如果该对象自身没有这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。例如：
TypeScript取消自动换行复制
在这段代码中，Person函数是一个构造函数，通过new关键字创建的person1对象的原型就是Person.prototype。sayHello方法定义在Person.prototype上，person1对象可以访问到这个方法，这就是原型链的工作原理。理解原型和原型链对于深入学习框架中的组件继承和复用机制十分关键，例如在 Vue 框架中，组件之间的继承就与原型链的概念紧密相关。
三、事件驱动与事件委托
JavaScript 是事件驱动的语言，网页中的各种交互操作（如点击按钮、鼠标移动、表单提交等）都可以通过事件来处理。我们可以为 DOM 元素添加事件监听器，当特定事件发生时，执行相应的回调函数。例如：
TypeScript取消自动换行复制
事件委托是一种高效的事件处理策略，它利用了事件冒泡的特性。事件冒泡指的是当一个元素上的事件被触发时，该事件会从目标元素开始，逐级向上传播到祖先元素。通过事件委托，我们可以将多个子元素的事件处理委托给它们共同的祖先元素，这样可以减少事件监听器的数量，提高性能。例如，有一个包含多个列表项的无序列表，我们可以将点击事件委托给<ul>元素：
TypeScript取消自动换行复制
在前端框架中，事件处理和事件委托也是核心机制之一。例如 React 框架通过合成事件系统来统一处理事件，并且在处理列表等大量元素的事件时，也会运用类似事件委托的策略来优化性能。掌握事件驱动和事件委托，能帮助我们更好地理解框架中组件交互和事件处理的实现方式。
四、异步编程
在 JavaScript 中，异步编程至关重要，因为 JavaScript 是单线程语言。如果所有任务都按顺序同步执行，当遇到耗时较长的操作（如网络请求、读取文件等）时，页面会出现卡顿，用户体验极差。因此，JavaScript 提供了多种异步编程的方式。
- 回调函数：这是最基本的异步处理方式。例如，使用setTimeout函数实现延迟执行任务：
TypeScript取消自动换行复制
在上述代码中，setTimeout的回调函数会在 1 秒后执行，而主线程不会等待它，而是继续执行后续代码，输出 “开始” 和 “结束”。然而，回调函数存在 “回调地狱” 的问题，当多个异步操作嵌套时，代码的可读性和维护性会变得很差。
2. Promise：Promise 是 ES6 引入的用于处理异步操作的对象，它可以解决回调地狱的问题。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。通过then方法处理成功的结果，通过catch方法处理失败的情况。例如：
TypeScript取消自动换行复制
Promise 还支持链式调用，使得多个异步操作可以按照顺序依次执行，代码更加清晰。
3. async/await：这是 ES2017 引入的异步编程语法糖，基于 Promise 实现，让异步代码看起来更像同步代码，大大提高了代码的可读性。async函数返回一个 Promise 对象，await关键字只能在async函数内部使用，用于等待一个 Promise 对象的结果。例如：
TypeScript取消自动换行复制
在前端框架中，异步操作频繁出现，如数据请求、组件加载等。例如在 Vue 框架中，使用async/await配合axios库进行数据请求是常见的做法。理解异步编程，能够让我们在使用框架开发时，更好地处理异步任务，提升应用的性能和用户体验。
五、DOM 操作
DOM（文档对象模型）是 HTML 和 XML 文档的编程接口，它将文档呈现为一个由节点和对象（包含属性和方法）组成的结构集合。JavaScript 通过 DOM 操作来动态地创建、修改、删除 HTML 元素，以及获取和设置元素的属性、样式等。例如，获取页面中的一个元素：
TypeScript取消自动换行复制
let element = document.getElementById('myElement');
修改元素的文本内容：
TypeScript取消自动换行复制
element.textContent = '新的文本内容';
修改元素的样式：
TypeScript取消自动换行复制
element.style.color ='red';
创建一个新元素并添加到页面中：
TypeScript取消自动换行复制
let newElement = document.createElement('div');
newElement.textContent = '这是新创建的元素';
document.body.appendChild(newElement);
前端框架的核心功能之一就是高效地管理和更新 DOM。例如 React 使用虚拟 DOM（Virtual DOM）技术，通过对比虚拟 DOM 的变化，最小化对真实 DOM 的操作，从而提高性能。理解原生 JavaScript 的 DOM 操作，有助于我们深入理解框架中 DOM 更新机制的原理，在使用框架时能够更好地优化性能，处理一些复杂的 DOM 相关问题。
六、模块化
随着项目规模的增大，代码的组织和管理变得愈发重要。JavaScript 的模块化就是将代码分割成独立的模块，每个模块都有自己的作用域，模块之间可以相互引用和依赖。在 ES6 之前，JavaScript 没有原生的模块化支持，开发者通常使用工具（如 RequireJS、Browserify 等）来实现模块化。ES6 引入了原生的模块化语法，包括export和import关键字。例如，创建一个模块math.js：
TypeScript取消自动换行复制
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
在另一个文件中引入并使用这个模块：
TypeScript取消自动换行复制
// main.js
import { add, subtract } from './math.js';
let result1 = add(2, 3);
let result2 = subtract(5, 1);
console.log(result1); // 输出：5
console.log(result2); // 输出：4
模块化使得代码的结构更加清晰，可维护性和复用性大大提高。在前端框架中，模块化也是不可或缺的一部分。例如在 Vue 项目中，每个组件都可以看作是一个模块，通过模块化的方式进行组织和管理，不同组件之间可以相互引用和通信。掌握 JavaScript 的模块化，有助于我们在使用框架开发大型项目时，更好地组织代码，提高开发效率。
原生 JavaScript 的这 6 个核心知识点，从变量作用域与闭包到模块化，构成了前端开发的坚实基础。无论面对 React、Vue 还是其他新兴的前端框架，只要深入理解和熟练掌握这些原生 JavaScript 知识，就能迅速把握框架的核心原理，更快地学习和应用框架，在前端开发领域游刃有余。在追求新技术的同时，切勿忽视对基础知识的巩固和深化，因为它们才是真正助力我们在技术浪潮中不断前行的关键。
