前端基础知识：作用域、闭包、原型链等

2025年6月18日

掌握 JavaScript 的作用域、闭包、原型链、事件委托、DOM 操作和异步编程，是成为优秀前端开发者的基础。本文将通过示例和讲解，帮助你理解这些核心概念。

作用域（Scope）

作用域是指变量的可访问范围。JavaScript 有全局作用域、函数作用域和块级作用域（ES6 引入）。

代码示例

let a = 1;
function foo() {
  let b = 2;
  if (true) {
    let c = 3;
    console.log(a, b, c); // 1 2 3
  }
  // console.log(c); // ReferenceError: c is not defined
}
foo();

变量 c 只在 if 块内有效，b 只在 foo 函数内有效，a 为全局变量。

闭包（Closure）

闭包是指有权访问另一个函数作用域中变量的函数。

代码示例

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

闭包使得内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。

原型链（Prototype Chain）

JavaScript 通过原型链实现对象的继承。

代码示例

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

const alice = new Person('Alice');
alice.sayHello(); // Hello, my name is Alice

通过原型链，alice 实例可以访问 Person.prototype 上定义的方法。

事件委托（Event Delegation）

事件委托是利用事件冒泡，将事件处理器绑定到父元素上，从而管理多个子元素的事件。

代码示例

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    alert(e.target.textContent);
  }
});
</script>

只需给父元素绑定一次事件，即可响应所有子元素的点击。

DOM 操作

DOM（文档对象模型）操作是前端开发的基础，可以通过 JavaScript 动态修改网页内容。

代码示例

const title = document.getElementById('title');
title.textContent = '新标题';
title.style.color = 'red';

通过 DOM API 获取元素并修改其内容和样式。

异步编程

JavaScript 支持多种异步编程方式，如回调、Promise、async/await。

代码示例

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('数据加载完成');
    }, 1000);
  });
}

async function main() {
  const data = await fetchData();
  console.log(data);
}

main();

async/await 让异步代码写起来像同步代码，更易读。

知识点总结

知识点简要说明
作用域变量的可访问范围，分为全局、函数和块级作用域。
闭包函数可以访问其外部作用域的变量。
原型链对象通过原型链实现属性和方法的继承。
事件委托利用事件冒泡机制，将事件绑定到父元素上。
DOM 操作通过 JavaScript 操作网页结构和内容。
异步编程如回调、Promise、async/await 等。
💡

夯实基础，才能更好地学习和应用前端新技术。

推荐阅读

Az_Goody