零基础快速入门前端蓝桥杯Web考点深度解析：var、let、const与事件绑定实战(可用于备赛蓝桥杯Web应用开发)

在蓝桥杯 Web 应用开发赛道中，变量声明的特性与 DOM 事件绑定是核心高频考点。本文将结合实战代码，深度解析var、let、const的区别，以及两种事件绑定方案的原理，并对应蓝桥杯考点进行拓展。

一、变量声明：var、let、const 的核心特性

1.1 预解析（变量提升）

核心区别：

• var存在变量提升：声明会被提升到作用域顶部，但赋值仍在原地。

• let/const不存在变量提升：声明前使用会触发 “暂时性死区”（ReferenceError）。

代码实例：

// var 的变量提升 console.log(a, b, c); // 输出：undefined undefined undefined（变量已声明，未赋值） var a = 'ggx handsome'; var b = 1; var c = 10; // let/const 的暂时性死区 // console.log(const1); // 报错：ReferenceError（const1 未初始化） const const1 = 10; console.log(const1); // 输出：10

考点汇总表：

1.2 块级作用域

核心区别：

• var无块级作用域：作用域为函数级或全局，{}无法限制其范围。

• let/const有块级作用域：仅在{}内有效，可隔离变量。

代码实例：

// let 的块级作用域 let a = 10; console.log(a); // 输出：10（全局作用域） if (1 > 0) { let a = 20; console.log(a); // 输出：20（块级作用域） } console.log(a); // 输出：10（全局作用域不受块级影响） // for 循环中的 let（蓝桥杯高频场景） for (let i = 0; i < 5; i++) { console.log(i); // 输出：0 1 2 3 4（i 仅在循环内有效） } // console.log(i); // 报错：i 未定义（块级作用域隔离）

考点汇总表：

1.3 const 的常量特性

const用于定义常量，核心规则：

1. 声明时必须赋值（否则报错）；

2. 基本数据类型（如数字、字符串）不可修改；

3. 引用数据类型（如数组、对象）地址不可改，但内部属性 / 元素可修改。

代码实例：

// 1. 声明时必须赋值 // const const2; // 报错：Missing initializer in const declaration const const2 = 'ggx handsome'; // 2. 基本类型不可修改 // const2 = 'ggx really handsome'; // 报错：Assignment to constant variable // 3. 引用类型：地址不可改，属性/元素可改 const array1 = [1, 2, 3, 4, 5]; const array2 = [1, 2, 3, 4, 5]; console.log(array1 == array2); // 输出：false（地址不同） array1[0] = 'ggx'; // 修改元素（地址不变） console.log(array1); // 输出：['ggx', 2, 3, 4, 5] const obj1 = { name: 'ggx' }; obj1.name = 'ggxC'; // 修改属性（地址不变） console.log(obj1); // 输出：{ name: 'ggxC' }

考点汇总表：

二、事件绑定的两种方案与蓝桥杯闭包考点

在蓝桥杯 DOM 操作题中，“循环绑定点击事件，获取正确索引” 是经典闭包考点。以下结合代码解析两种方案：

2.1 方案一：var + 自定义属性（ES5 兼容方案）

问题：var无块级作用域，循环内的i是共享变量，循环结束后i为最大值（如5），点击时直接用i会出错。

解决：通过setAttribute给每个元素存储索引，点击时用this.getAttribute('index')获取。

代码实例：

var names = document.querySelectorAll('.name'); var lastIndex = 0; for (var i = 0; i < names.length; i++) { var div = names[i]; div.setAttribute('index', i); // 存储索引到自定义属性 div.onclick = function() { var index = this.getAttribute('index'); // 获取当前元素的索引 names[lastIndex].className = 'name'; // 清除上一个高亮 names[index].className = 'name highLight'; // 当前元素高亮 lastIndex = index; console.log(i); // 点击任意元素，输出：5（var 的共享特性） }; }

2.2 方案二：let + 块级作用域（ES6 推荐方案）

优势：let有块级作用域，每次循环的i都是独立变量，事件绑定可直接使用i，无需额外操作 DOM。

代码实例：

var names = document.querySelectorAll('.name'); var lastI = 0; for (let i = 0; i < names.length; i++) { names[i].onclick = () => { console.log(i); // 点击对应元素，输出：0、1、2...（let 的块级绑定） names[lastI].classList.remove('highLight'); // 清除上一个高亮 names[i].classList.add('highLight'); // 当前元素高亮 lastI = i; }; }

2.3 蓝桥杯考点：闭包与作用域辨析

考点逻辑：

• var方案：i是全局变量，点击事件触发时才读取i（此时i已为循环结束值），需通过自定义属性 “保存” 索引。

• let方案：每次循环生成独立的块级作用域，i被绑定在当前作用域，点击时直接读取作用域内的i，天然解决闭包问题。

考法示例：

• 给出var循环绑定事件的代码，问点击后输出什么（答案：循环结束值）；

• 要求修复索引错误（方案：改用let，或用闭包 / 自定义属性）。

三、知识点终极汇总表

3.1 var、let、const 全面对比

3.2 两种事件绑定方案对比

蓝桥杯备考建议：

• 优先用let/const替代var，避免作用域陷阱；

• 循环绑定事件时，let是最简洁的解决方案；

• 若需兼容 ES5，再考虑自定义属性或闭包。