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:
27
03-javascript-core/12-this-keyword/README.md
Normal file
27
03-javascript-core/12-this-keyword/README.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# 练习 12:this
|
||||
|
||||
## 目标
|
||||
|
||||
理解 `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)
|
||||
26
03-javascript-core/12-this-keyword/answer.js
Normal file
26
03-javascript-core/12-this-keyword/answer.js
Normal 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。");
|
||||
18
03-javascript-core/12-this-keyword/starter.js
Normal file
18
03-javascript-core/12-this-keyword/starter.js
Normal 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 返回的新函数
|
||||
Reference in New Issue
Block a user