JavaScript函数中的this绑定解析
31 浏览量
更新于2024-08-28
收藏 262KB PDF 举报
"本文详细讲解了JavaScript中函数内的`this`关键字的四种绑定形式,包括默认绑定、隐式绑定、显式绑定和new绑定。通过一个虚构的故事,形象地阐述了`this`总是指向调用它的对象这一核心概念。"
在JavaScript中,`this`是一个非常关键的概念,尤其是在函数上下文中。它通常指向调用该函数的对象,这个原则是理解`this`行为的基础。文章通过一个有趣的故事来解释这个概念,故事的主角"迪斯"代表`this`,他在名为"伽瓦斯克利"(JavaScript)的世界里寻找自己的归属——调用函数的对象。
### 1. 默认绑定
当函数被作为普通函数调用,没有明确的上下文(调用者对象)时,`this`会被默认绑定到全局对象。在浏览器环境中,全局对象通常是`window`。以下示例展示了这种绑定:
```javascript
function fire() {
console.log(this === window);
}
fire(); // 输出 true
```
即使函数内部嵌套了其他函数,如`innerFire`,它们的`this`仍然会遵循默认绑定规则,指向全局对象`window`:
```javascript
function fire() {
function innerFire() {
console.log(this === window);
}
innerFire(); // 输出 true
}
fire();
```
### 2. 隐式绑定
隐式绑定发生在函数被某个对象的方法调用时,`this`会绑定到那个对象。例如:
```javascript
var obj = {
fire: function() {
console.log(this === obj);
}
};
obj.fire(); // 输出 true
```
在这种情况下,`fire`函数内的`this`指向`obj`,因为它是`obj`的一个方法。
### 3. 显式绑定
通过`call`、`apply`或`bind`方法,可以显式地设置`this`的值。这些方法允许开发者强制`this`指向任何指定的对象,无论函数如何被调用。例如:
```javascript
function fire() {
console.log(this === obj);
}
var obj = {};
fire.call(obj); // 输出 true
```
在上面的代码中,即使`fire`没有作为`obj`的方法,我们依然可以通过`call`方法让`this`指向`obj`。
### 4. new 绑定
当使用`new`关键字创建一个新的对象实例时,`this`会被绑定到新创建的对象。例如:
```javascript
function Person(name) {
this.name = name;
console.log(this === this.name);
}
var person = new Person("John"); // 输出 true
```
在这里,`new`操作符创建了一个新的`Person`实例,并将`this`绑定到这个新实例,因此`this.name`是对新对象属性的引用。
总结来说,JavaScript中的`this`有四种主要的绑定方式:默认绑定、隐式绑定、显式绑定和new绑定。理解这些绑定形式对于编写复杂的JavaScript代码至关重要,因为它们决定了`this`在不同情况下的行为。通过深入学习和实践,开发者可以更好地掌握`this`的关键用法,避免常见的陷阱和误解。
2020-10-19 上传
2022-10-21 上传
2020-10-21 上传
2020-10-21 上传
2021-01-21 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
weixin_38700790
- 粉丝: 5
- 资源: 953
最新资源
- AA4MM开源软件:多建模与模拟耦合工具介绍
- Swagger实时生成器的探索与应用
- Swagger UI:Trunkit API 文档生成与交互指南
- 粉红色留言表单网页模板,简洁美观的HTML模板下载
- OWIN中间件集成BioID OAuth 2.0客户端指南
- 响应式黑色博客CSS模板及前端源码介绍
- Eclipse下使用AVR Dragon调试Arduino Uno ATmega328P项目
- UrlPerf-开源:简明性能测试器
- ConEmuPack 190623:Windows下的Linux Terminator式分屏工具
- 安卓系统工具:易语言开发的卸载预装软件工具更新
- Node.js 示例库:概念证明、测试与演示
- Wi-Fi红外发射器:NodeMCU版Alexa控制与实时反馈
- 易语言实现高效大文件字符串替换方法
- MATLAB光学仿真分析:波的干涉现象深入研究
- stdError中间件:简化服务器错误处理的工具
- Ruby环境下的Dynamiq客户端使用指南