1月19日java假期学习读书笔记
一、学习目标
理解JavaScript闭包的概念和应用场景。
掌握原型链的工作原理。
学习异步编程（Promise和Async/Await）。
深入理解DOM操作。
通过实际练习，编写更复杂的JavaScript代码。
二、学习内容
（一）JavaScript闭包
闭包的定义
闭包是一个函数和其周围的状态（词法环境）的组合。
闭包可以捕获外部函数的局部变量，即使外部函数已经执行完毕。
闭包的应用场景
数据封装：闭包可以隐藏内部变量，防止外部直接访问。
创建私有函数：闭包可以创建只能在特定范围内访问的函数。
示例代码
JavaScript
复制
function createCounter() {
let count = 0; // 局部变量
return {
increment: function () {
count++;
console.log(count);
},
decrement: function () {
count--;
console.log(count);
}
};
}
const counter = createCounter();
counter.increment(); // 输出：1
counter.increment(); // 输出：2
counter.decrement(); // 输出：1
（二）原型链
原型链的定义
在JavaScript中，每个对象都有一个__proto__属性，指向它的原型对象。
原型链是通过对象的原型逐级向上查找属性或方法的过程。
原型链的工作原理
当访问对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript会沿着原型链向上查找，直到找到为止。
示例代码
JavaScript
复制
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function () {
return Hello, my name is ${this.name};
};
const person1 = new Person("Alice");
console.log(person1.sayHello()); // 输出：Hello, my name is Alice
（三）异步编程
Promise
Promise是一个表示异步操作最终完成（或失败）及其结果的对象。
Promise有三种状态：Pending（进行中）、Fulfilled（已完成）、Rejected（已失败）。
Promise的使用
JavaScript
复制
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "Hello, World!";
resolve(data); // 成功时调用resolve
}, 2000);
});
};
fetchData().then(data => {
console.log(data); // 输出：Hello, World!
}).catch(error => {
console.error(error);
});
Async/Await
async函数是基于Promise的语法糖，让异步代码看起来像同步代码。
JavaScript
复制
async function fetchData() {
return "Hello, World!";
}
async function main() {
try {
const data = await fetchData();
console.log(data); // 输出：Hello, World!
} catch (error) {
console.error(error);
}
}
main();
（四）DOM操作
DOM简介
DOM（Document Object Model）是文档对象模型，用于操作HTML文档的结构和内容。
常用DOM操作
获取元素：
JavaScript
复制
const element = document.getElementById("myElement");
const elements = document.getElementsByClassName("myClass");
修改元素内容：
JavaScript
复制
element.innerHTML = "新的内容";
element.textContent = "新的文本内容";
添加和删除元素：
JavaScript
复制
const newElement = document.createElement("div");
newElement.textContent = "新元素";
document.body.appendChild(newElement);
document.body.removeChild(newElement);
事件监听：
JavaScript
复制
element.addEventListener("click", function () {
console.log("元素被点击了！");
});
（五）实际练习
实现一个简单的倒计时功能
HTML
复制
浙公网安备 33010602011771号