vue中let _this=this作用

Vue中this的陷阱与解决：定时器与变量绑定
最新推荐文章于 2023-07-27 14:11:09 发布
原创 最新推荐文章于 2023-07-27 14:11:09 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍了在Vue中使用定时器时，this关键字指向改变的问题，导致无法正确修改vue实例的变量。通过保存初始的this为`_this`，可以确保在回调函数中仍能访问到vue实例的属性和方法。这个技巧对于理解和避免在前端开发中常见的Vue绑定错误至关重要。 
//vue 变量 
isclick: true,
//定时器3秒后将isclick改为false
setTimeout(function(){
	this.isclick = false; 
},3000);
//打印this.isclick依然是true;

let _this=this作用：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，普通函数的this指向调用它的那个对象，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法。

Vue项目中，在filters中使用this（Vue实例对象）
郭宝的博客
05-06 6071
效果图： 方式一： 在data对象中定义一个 this_ 变量，接收this（Vue实例对象），如下代码： data() { return { this_: this } } 然后声明过滤器时，在形参中加上vue filters: { teacherFiliters(value, vue) { console.log(vue) for (let i = 0; i < vue.teachers.length; i...
TypeScript let{oa,ob}=this;
shenliang34的专栏
02-19 661
TypeScript let{oa,ob}=this; 把this中oa变量赋值给一个临时变量 == let oa = this.oa
let _this = this；作用讲解
有一颗前端心的后端开发小哥
12-08 3829
let _this = this;作用讲解 近日在学习vue方面，发现一个问题回答的挺好，在此记录下。 作用讲解：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法 ...
this指向之—Vue，let _this = this
MoXinXueWEB的博客
08-21 440
小菜鸟发库存
Vue中 let _this = this的作用
songjuntao8的专栏
04-26 674
作用讲解：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法。在Vue中this始终指向Vue，但一些其他组件如axios中this为undefined,通过let _this= this将this保存在_this中，再在函数中使用_this均可。近日在学习vue方面，发现一个问题回答的挺好，在此记录下。
Vue源码解析：this.$data、this._data、this.xxx 为什么都能获取数据？data为什么是个函数？
热门推荐
全端菜鸟小姐
12-26 2万+
data中定义了一个数据msg, vue实例上访问这个数据有两种方式，this.$data.msg 和 this.msg，请问，为vue如何实现this.msg能直接访问到data中的msg变量？？？data又为什么是个函数？ 分析： clone 下 vue 的项目源码，然后打开src/core/instance/index.js 调用 init 方法时先进行了检查，确保已经使用 n...
在vue中使用回调函数,this调用无效的解决
11-19
let self = this //使用新变量替换this，以免this无效 //updateStudentInfoToServer是一个将本身部分数据异步上传的接口，接收三个参数，其中第一个是数据，第二、三个是函数，第二、三个函数使用function(){}形式...
vue_t_v14
l1029455098的博客
03-21 3023
vue
vue2.0使用ES6语法的箭头函数对this作用域的理解
若晨工作室
09-19 1万+
在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，导致浏览器报错。 部分代码： test:function(){                 let _self = this;//在外层函数内定义变量存储当前vue实例。 this.$axios.post("url",{ }).then(function(res){
对于 let _this = this的理解
weixin_44245853的博客
12-11 971
$("#btn").click(function(){ var _this = this; //这里this和_this都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象 _this;//这里仍代表上面的"#btn"对象 }) }) ...
vue2项目中 let _this=this 这么写的好处是什么
m0_57742630的博客
07-27 1284
由于JavaScript中"this"的指向取决于函数的调用方式，而在Vue中，组件中的方法有时可能会导致"this"上下文不正确，尤其是在涉及回调函数或异步操作时。1. 解决回调函数中的"this"问题：在Vue组件中，如果使用箭头函数（ES6的箭头函数具有词法作用域），则可以避免"this"上下文丢失。但是，如果使用普通函数，那么函数内部的"this"将会丢失它原本应该指向的Vue组件实例，此时，将"this"赋值给"_this"可以在回调函数中正确地访问Vue组件实例。
JS中关于 let that = this 的理解
weixin_51795940的博客
07-21 2048
在JavaScript中，这种写法通常用于解决this关键字在不同作用域中指向不同对象的问题。在某些情况下，例如在嵌套函数或回调函数中，this关键字可能不再指向期望的对象。为了在这些情况下仍然能够访问外部作用域中的this，开发人员会创建一个新的变量（通常命名为that或self），并将其赋值为外部作用域中的this。这样，在嵌套函数或回调函数中，就可以通过访问that变量来访问外部作用域中的this。在上面的代码中，由于setTimeout的回调函数是在全局作用域中执行的，所以其中的this。
let 和 var的区别
weixin_30420305的博客
03-04 177
基本用法 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果l...
Vue中使用es6语法（=＞和let)（2020-10-19）
Larry的博客
10-19 1133
vue 中 的=>函数 箭头函数一般用于函数嵌套时，防止this指向变化，在箭头函数中this的指向一直是外层对象，即廖雪峰大神说的“箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj” function(x){ return x + 6; }; 相当于( x) => x+6 简化了return和function显示声明 当有多个返回值时，或者多个条件则： x => { if (x > 0) { return x
【折腾】非响应式数据为何不能用let而是this
Madman528的博客
03-25 468
非响应式数据定义在return{}外， ，照理data()也是个函数，为何用let定义外面无法访问，要用this.属性=““ 才可以，是因为作用域问题吗 得出结论：在datareturn外定义的用let var name声明的数据不过是普通变量，无法被外界访问，当然不信是个函数可以打印一下 data渲染后再到mounted ...
vue let _this = this
最新发布
11-02
<think>我们正在讨论Vue中使用`let _this = this`的模式。这种模式主要用于保存当前Vue组件实例的上下文（`this`），以便在其他作用域（如异步回调、嵌套函数）中能够访问到组件的实例。 ### 1. 作用和原理 **作用**： 在JavaScript中，函数的`this`值取决于它的调用方式。当我们在Vue组件的某个方法内部定义了一个嵌套函数（如setTimeout、事件监听器、Promise回调等），嵌套函数中的`this`通常不会指向Vue组件实例。使用`let _this = this`可以将外层函数的`this`（即Vue实例）保存到一个变量`_this`中，然后在嵌套函数内部通过`_this`访问组件实例。 **原理**： 利用了JavaScript的词法作用域（闭包）特性。在函数执行时，它会创建一个作用域链，内部函数可以访问外部函数的变量。因此，将`this`赋值给`_this`后，嵌套函数可以通过作用域链访问到`_this`，从而访问到组件实例。 ### 2. 使用场景 #### 场景一：异步回调（setTimeout, setInterval） ```javascript methods: { fetchData() { let _this = this; // 保存当前this setTimeout(function() { // 这个函数内部的this指向全局对象（或undefined，严格模式下） console.log(this); // 可能是Window对象 // 通过_this访问组件实例 _this.dataList = ['item1', 'item2']; }, 1000); } } ``` #### 场景二：事件处理器（需要访问组件数据） ```javascript created() { let _this = this; window.addEventListener('resize', function() { // 这里this指向触发事件的元素（即window），不是Vue实例 _this.windowWidth = window.innerWidth; // 通过_this访问组件数据 }); } ``` #### 场景三：Promise链式调用 ```javascript methods: { getUserData() { let _this = this; axios.get('/api/user') .then(function(response) { // 这里this不指向Vue实例 _this.user = response.data; }) .catch(function(error) { _this.error = error.message; }); } } ``` ### 3. 与ES6箭头函数的对比 在ES6中，箭头函数没有自己的`this`，它会继承外层作用域的`this`值。因此，使用箭头函数可以避免`let _this = this`的写法： ```javascript methods: { fetchData() { setTimeout(() => { // 箭头函数内的this继承自fetchData的作用域，即Vue实例 this.dataList = ['item1', 'item2']; }, 1000); } } ``` ### 4. 注意事项 1. **命名约定**：通常使用`_this`、`that`或`self`作为变量名，但这不是强制的。 2. **严格模式**：在严格模式下，未绑定的函数内部的`this`是`undefined`，使用`_this`可以避免错误。 3. **箭头函数优先**：在支持ES6的环境中，优先使用箭头函数，代码更简洁。 ### 原理图示 ``` +------------------+ | Vue 组件实例 | | this: 指向组件 | <---- 被_this引用 | | | 方法执行: | | let _this = this | ↓ | setTimeout(function() { ... }) | ↑ | +-- 内部函数有自己的this（全局或undefined） | +-- 但通过闭包可以访问外部变量_this +------------------+ ``` ### 总结 在Vue中使用`let _this = this`是一种经典的JavaScript模式，用于解决嵌套函数中`this`指向改变的问题。它通过闭包机制保存组件实例的引用。在ES6环境下，箭头函数是更简洁的替代方案[^1]。 §§相关问题§§ 1. 箭头函数为什么能解决this指向问题？ 2. 在Vue中哪些场景必须使用普通函数？ 3. JavaScript中this绑定的规则有哪些？ 4. Vue3的setup语法中如何处理this问题？ 5. 使用call/apply改变this指向与_this模式有何异同？ </think>### Vue 中使用 `let _this = this` 详解 #### 一、作用原理 1. **上下文保留**： JavaScript 的函数作用域中，`this` 指向取决于**调用方式**。当在异步回调、事件处理等嵌套函数中，`this` 会丢失原 Vue 实例的上下文： ```javascript methods: { fetchData() { setTimeout(function() { // 这里的 this 指向 Window 对象，而非 Vue 实例 console.log(this); // Window }, 1000) } } ``` 2. **闭包机制**： `let _this = this` 通过**闭包**将当前 Vue 实例的引用保存到 `_this` 变量中。嵌套函数通过作用域链访问外层变量，确保始终指向正确的实例： ```javascript methods: { fetchData() { let _this = this; // 当前 Vue 实例 setTimeout(function() { console.log(_this); // 正确指向 Vue 实例 _this.dataList = []; // 可操作组件数据 }, 1000) } } ``` #### 二、典型使用场景 1. **异步操作** ```javascript methods: { loadAPI() { let _this = this; axios.get('/api/data') .then(function(res) { _this.items = res.data; // 正确更新数据 }) } } ``` 2. **事件监听器** ```javascript mounted() { let _this = this; window.addEventListener('resize', function() { _this.windowWidth = window.innerWidth; // 访问组件状态 }) } ``` 3. **第三方库回调** ```javascript initMap() { let _this = this; new GoogleMap({ click: function() { _this.handleMapClick(); // 调用组件方法 } }) } ``` #### 三、与箭头函数的对比 | 方式 | 优点 | 缺点 | |--------------------|--------------------------|--------------------------| | `let _this = this` | 兼容性最好（支持 ES5） | 需额外声明变量 | | **箭头函数** | 语法简洁（自动绑定外层 this） | 不支持 IE / 旧版浏览器 | ```javascript // 箭头函数替代方案（ES6+） methods: { fetchData() { setTimeout(() => { this.dataList = []; // 自动绑定外层 this }, 1000) } } ``` #### 四、底层原理分析 1. **JavaScript 的 `this` 绑定规则**： - 默认绑定：独立函数调用时 `this` 指向全局对象 - 隐式绑定：`obj.func()` 调用时 `this` 指向 `obj` ```javascript const obj = { value: 10, getValue() { console.log(this.value); // 10 (隐式绑定) const innerFunc = function() { console.log(this.value); // undefined (默认绑定) } innerFunc(); } } ``` 2. **闭包实现**： `_this` 变量被内层函数引用，形成闭包，即使外层函数执行完毕，内层函数仍能访问 `_this`[^1]。 #### 五、最佳实践建议 1. **现代项目**：优先使用**箭头函数**（代码更简洁） 2. **兼容旧浏览器**：使用 `let _this = this` 3. **备用方案**：通过 `.bind(this)` 显式绑定： ```javascript setTimeout(function() { this.updateData(); }.bind(this), 1000) ``` > 核心本质：通过闭包解决 JavaScript 的动态 `this` 绑定问题，确保在嵌套作用域中访问正确的 Vue 实例[^1]。 --- ### 相关问题 1. 箭头函数为什么能自动绑定外层 `this`？ 2. Vue 的 `methods` 中直接使用 `this` 指向什么？ 3. 如何在 Vue 的异步回调中避免内存泄漏？ 4. `let _this = this` 与 Vue 的 `vm = this` 写法有何区别？ 5. 为什么在 Vue 的生命周期钩子中不需要 `_this` 技巧？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值