Vue与小程序中this解析：匿名函数的影响

170 浏览量更新于2024-08-29 收藏 78KB PDF 举报

"this在vue和小程序中的使用详解" 在JavaScript编程中，`this`关键字是一个非常重要的概念，尤其是在Vue.js和微信小程序等框架中。`this`通常用来引用当前对象，但其行为在不同上下文中有不同的表现。本文将探讨在Vue和小程序中`this`的使用，并特别关注在匿名函数下的行为。首先，让我们看一下提供的Vue.js示例。在这个例子中，`this`被用于访问Vue实例的数据和方法。在Vue组件中，`this`通常指向当前Vue实例，使得我们可以访问到`data`、`methods`等属性。 ```html <body> <div id="app"> {{ message }} </div> </body> ``` 在对应的JavaScript代码中： ```javascript var message = '我是全局message!'; var app = new Vue({ el: '#app', data() { return { message: '我是vue下的message!' } }, created() { this.getData() }, methods: { getData() { axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1') .then(function() { console.log(this.message); // => 我是全局message! }) } } }) ``` 在这个例子中，`getData`方法中使用了匿名函数来处理axios的响应。当我们在匿名函数内部使用`this`时，`this`的值不再是Vue实例，而是指向上调用该函数的环境，即全局对象（在浏览器环境中是`window`）。因此，`console.log(this.message)`打印出的是全局变量`message`的值，而不是Vue实例中的`message`。问题在于，JavaScript中的匿名函数（包括回调函数和箭头函数）的`this`不是由函数调用方式决定的，而是由函数定义时所在的作用域决定。在浏览器环境中，全局作用域的`this`默认指向`window`。要解决这个问题，可以使用箭头函数，因为箭头函数不会创建自己的`this`，它会捕获其所在（即定义时）的作用域的`this`值： ```javascript getData() { axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1') .then(() => { console.log(this.message); // => 我是vue下的message! }) } ``` 这里，我们使用箭头函数替换原来的匿名函数，`this`将正确地指向Vue实例，从而能够输出`"我是vue下的message!"`。同样的情况也适用于微信小程序。在小程序中，`this`同样用于引用当前Page实例，因此在处理异步操作如网络请求时，需要特别注意`this`的指向。如果在异步回调中需要访问Page实例的属性或方法，可以将`this`保存在一个变量中，或者使用箭头函数来确保正确的上下文： ```javascript getData() { const self = this; // 保存this的引用 wx.request({ url: 'your-api-url', success: function(res) { console.log(self.message); // => 正确输出 } }); } ``` 或者： ```javascript getData() { wx.request({ url: 'your-api-url', success: () => { console.log(this.message); // => 正确输出 } }); } ``` 总结来说，在Vue和微信小程序中，理解`this`的动态绑定对于编写可维护的、无bug的代码至关重要。务必注意在匿名函数和异步操作中`this`的指向，避免混淆全局变量与实例属性，以及合理利用箭头函数来保持正确的上下文。

this在在vue和小程序中的使用详解和小程序中的使用详解

匿名函数下的匿名函数下的this

方便本地demo，没有使用webpack

引入两个文件，vue和axios

axios返回一个promise对象，我们通过axios进行ajax请求

<body>

</div>

</body>

看下js部分

var message = '我是全局message!';

var app = new Vue({

el: '#app',

data() {

return {

message: '我是vue下的message!'

}

created() {

this.getData()

methods: {

getData() {

axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')

.then(function () {

console.log(this.message);//=>我是全局message!

})

}

})

不必关心axios请求的接口返回的数据

那么在axios下，输出的是=>我是全局message!,为什么呢？我们是想输出=>”我是vue下的message!”

在这里有那么一些人就蒙了，为什么axios下会这样呢？

axios有话说：

出现这种情况，不是axios的锅，

不信你往下看

//其他代码省略

getData() {

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38564003

粉丝: 6
资源: 923

Vue与小程序中this解析：匿名函数的影响

Vue中ECharts图表使用与API详解笔记

Vue.js实现图形验证码功能详解

微信小程序面试详解：核心概念与差异

Vue高版本中一些新特性的使用详解

详解微信小程序框架wepy踩坑记录（与vue对比）

详解vue文件中使用echarts.js的两种方式

详解vue2.0监听属性的使用心得及搭配计算属性的使用

实例详解vue中的$root和$parent

vue实现图书管理demo详解

vue2 以及小程序面试题文档，帮助你快速了解，vue2框架以及小程序的核心

最新资源