feat: Add JavaScript core exercises and solutions

- Implemented exercises for array high-order methods, memory and execution, switch statements, and final review.
- Added starter and answer files for each exercise to facilitate learning.
- Created a runner HTML file to execute JavaScript code and display console outputs.
- Updated README files to include exercise objectives, tasks, and usage instructions.
This commit is contained in:
charlie
2026-03-13 11:09:19 +08:00
parent 4495ae0e28
commit 877acb5a8f
51 changed files with 1949 additions and 5 deletions

View File

@@ -0,0 +1,27 @@
# 练习 12this
## 目标
理解 `this` 会随着调用方式不同而变化。
## 你要练什么
- 对象方法调用
- 普通函数调用
- 箭头函数继承外层 `this`
- `this` 指向
## 任务
请完成一个“学习者对象”脚本,要求:
- 创建一个带 `name``stage` 的对象
- 写一个对象方法,方法内部用 `this.name`
- 取出这个方法单独调用,观察 `this` 变化
- 再写一个返回箭头函数的方法,观察箭头函数为什么还能拿到对象的 `this`
- 输出 3 种调用结果
## 文件
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/starter.js)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/03-javascript-core/12-this-keyword/answer.js)

View File

@@ -0,0 +1,26 @@
const student = {
name: "林晨",
stage: "JavaScript 核心",
sayHello() {
const currentName = this && this.name ? this.name : "未知调用者";
const currentStage = this && this.stage ? this.stage : "未知阶段";
console.log(`你好,我是 ${currentName},正在学习 ${currentStage}`);
},
createArrowReporter() {
return () => {
console.log(`箭头函数继承到的 this.name${this.name}`);
};
},
};
student.sayHello();
const detachedHello = student.sayHello;
detachedHello();
const arrowReporter = student.createArrowReporter();
arrowReporter();
console.log("对象方法里的 this 通常指向调用它的对象。");
console.log("脱离对象单独调用后,普通函数里的 this 会跟着调用方式变化。");
console.log("箭头函数没有自己的 this它会继承创建它时外层的 this。");

View File

@@ -0,0 +1,18 @@
const student = {
name: "林晨",
stage: "JavaScript 核心",
sayHello() {
// 任务:
// 1. 用 this.name 输出问候语
},
createArrowReporter() {
// 任务:
// 2. 返回一个箭头函数
// 3. 在箭头函数里输出 this.name
},
};
// 任务:
// 4. 调用 student.sayHello()
// 5. 把 student.sayHello 赋值给 detachedHello 再调用
// 6. 调用 createArrowReporter 返回的新函数