https://github.com/hlxuan/javascript-this
「JavaScript 编程基础」课程——this指向
https://github.com/hlxuan/javascript-this
javascript this
Last synced: 15 days ago
JSON representation
「JavaScript 编程基础」课程——this指向
- Host: GitHub
- URL: https://github.com/hlxuan/javascript-this
- Owner: Hlxuan
- Created: 2024-11-23T09:45:51.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2026-06-13T14:37:28.000Z (23 days ago)
- Last Synced: 2026-06-13T16:23:57.186Z (22 days ago)
- Topics: javascript, this
- Language: HTML
- Homepage:
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# javascript-this（JavaScript函数this指向）
  
## 项目描述
### [步骤0：验证函数调用时`this`指向的不同情况](00_this指向的实验.html)
本步骤将理解`this`在`JavaScript`执行上下文中的指向规则。
#### 预期结果
- 直接调用`foo()`函数，`this`指向全局对象`window`；
- 通过对象调用`obj.showThis`函数，`this`指向调用函数的对象。
### [步骤1：验证不同场景下`this`的默认绑定规则](01_this绑定规则实验.html)
本步骤将通过研究不同的场景来观察`this`指向的变化，包括普通函数调用、对象属性方法独立调用、高阶函数内部调用，以及严格模式下的函数调用。
#### 预期结果
- 普通函数独立调用，在非严格模式下，`this`指向全局对象`window`；在严格模式下，`this`为`undefined`；
- 在对象内定义的方法独立调用`baz()`，`this`指向全局对象`window`；
- 在高阶函数内部调用`obj.bar`，`this`指向全局对象`window`；
- 在严格模式下，`this`为`undefined`；
### [步骤2：验证`this`的隐式绑定规则](02_this隐式绑定实验.html)
本步骤将探索`this`的隐式绑定规则。
#### 预期结果
- 在`obj.bar()`调用中，`this`指向调用函数的对象。
### [步骤3：验证`this`在`new`调用下的绑定规则](03_this_new绑定实验.html)
本步骤将探索`this`在`new`调用下的绑定规则。
#### 预期结果
- 使用`new`关键词调用`foo()`，`this`指向新创建的对象。
### [步骤4：验证`this`的显式绑定规则](04_this显式绑定实验.html)
本步骤将探索`this`的显式绑定规则。
#### 预期结果
- 调用`foo.call(obj)`，`this`被显式绑定指向对象`obj`；
- 调用`foo.apply(123)`，数字会被自动封装成对应的Number对象。
- 调用`foo.call("abc")`，字符串会自动封装成对应的String对象。
### [步骤5：验证`apply`和`call`的使用方法](05_apply_call实验.html)
本步骤将在不同调用方式下改变`this`指向以参数传递的方式。
#### 预期结果
- 直接调用`foo("gkd", 18, 1.88)`函数，`this`指向全局对象`window`，在严格模式下为`undefined`；
- 使用`apply`调用`foo.apply("apply", ["kobe", 30, 1.98])`，`this`指向字符串`apply`；
- 使用`call`调用`foo.call("call", "james", 30, 1.98)`，`this`指向字符串`call`；
### [步骤6：验证`bind`方法的使用](06_bind方法实验.html)
本步骤将学习`bind`方法的作用和使用方法。
#### 预期结果
- 使用`bind`方法绑定`this`指向，`this`指向绑定对象。
### [步骤7：验证特殊场景中的`this`绑定](07_特殊场景this绑定实验.html)
本步骤将研究定时器、事件监听器以及数组的`forEach`方法如何处理`this`指向`this`指向。
#### 预期结果
- 使用`setTimeout`绑定`this`指向，`this`指向全局对象`window`（在非严格模式下）；
- 使用`addEventListener`和`onclick`绑定`this`指向，`this`指向绑定对象；
- 使用`forEach`绑定`this`指向，`this`指向绑定对象。