JavaScript 中的 var that = this

本文讲解了JavaScript中this关键字的概念及应用,通过实例说明如何利用var that = this来保存当前this引用,确保在回调函数或其他作用域中仍能访问到正确的this上下文。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于JavaScript中的var that =this

                                                                                         Author:Bridge
                                                                                         Time:2017/8/01

在JavaScript中,今天学习H5写一个小游戏的时候,遇到了一个不太懂的点,在此写下自己的第二篇优快云博客。
var that = this;//传递this对象

this 是JavaScript语言的一个关键字。它代表函数运行时,自动生成一个内部对象,只能在函数内部使用。
在以上代码中,就是将当前的对象this复制到that中。举个栗子说明一下:

        $('#canvas').click(function () {
            var that = this;//this是被点击的#canvas

            $('.mine-canvas').forEach(function () {//.mine-canvas是当前的循环对象,that仍然是当前的this

            })
        })

从上面的栗子可以看出,在执行的过程中,this对象会被改变,如果将其复制道that中,that没有改变之前仍然是指向了当时的this,可以找到原this对象。其中,在之前的一个项目微信小程序中,也见到过

let that = this;

原理相同,不再栗子中赘述。以上是我第一次在优快云写关于自己学习的博客文章,有很多不懂得,参考和借鉴,多多学习,正从一个菜鸟进化到一个前端老鸟的路上。在遇到很多问题的时候,不要着急,想明白问题本身出在哪,再对症下药。


程序猿必备的三个工具,第一是Github ,第二是Google StackOverflow ,其中的大神数不胜数,多多学习,贵在恒。

### JavaScript 中 `var that = this` 的用法与目的 在 JavaScript 中,`var that = this` 是一种常见的模式,用于解决特定上下文中 `this` 关键字的行为问题。JavaScript 中的 `this` 是动态绑定的,其值取决于函数调用的方式[^3]。 当在一个嵌套函数或者异步回调中使用 `this` 时,可能会发现它的值不再指向期望的对象,而是指向全局对象或其他意外的目标。为了保留外部函数中的 `this` 值,在进入内部函数之前将其赋值给另一个变量(通常是 `that` 或 `_this`),以便在内部函数中继续访问它。 以下是这种模式的一个典型例子: ```javascript function Person(name) { var that = this; // 将当前的 this 绑定到 that this.name = name; setTimeout(function () { console.log(that.name); // 使用 that 来代替 this }, 1000); } new Person('Alice'); // 输出 Alice ``` 在这个例子中,如果直接使用 `this.name` 替代 `that.name`,由于 `setTimeout` 的回调函数会在全局作用域下执行,因此 `this` 不再指向 `Person` 实例,而可能是指向全局对象(浏览器环境下的 `window`)。通过提前保存 `this` 到 `var that`,可以确保即使在不同的作用域中也能正确引用原始对象实例[^4]。 #### 更现代的方法替代 `var that = this` 尽管这种方法仍然有效,但在 ES6 及更高版本中推荐使用箭头函数来简化这一过程。因为箭头函数不会创建自己的 `this` 上下文,它们会继承定义时所在的上下文。上述代码可以用箭头函数重写如下: ```javascript function Person(name) { this.name = name; setTimeout(() => { // 箭头函数自动捕获外层 this console.log(this.name); }, 1000); } new Person('Bob'); // 输出 Bob ``` 这样就不需要显式声明额外的变量如 `that` 或 `_this`。 ### 总结 - **用途**: 解决因作用域变化而导致的 `this` 错误绑定问题。 - **实现方式**: 在方法体内先将 `this` 存储至局部变量 (通常命名为 `that`) ,供后续闭包或回调函数使用。 - **更优方案**: 推荐采用 ES6 箭头函数以减少手动管理 `this` 的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钺商科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值