vue2.0使用ES6语法的箭头函数对this作用域的理解
来源:互联网 发布:传感器的数据采集 编辑:程序博客网 时间:2024/06/10 10:10
在做vue项目时用到了axios,但是发现axios请求之后的回调函数里this并不指向当前vue实例,导致浏览器报错。
部分代码:test:function(){
let _self = this;//在外层函数内定义变量存储当前vue实例。
this.$axios.post("url",{ }).then(function(res){
console.log(this);//结果是:undefined
console.log(_self );//结果是:VueComponent {_uid: 10, _isVue: true, $options: Object…}
})
}
从以上结果来看,在methods下的函数this指向的是当前创建的vue实例,而在这些函数内部使用例如axios与后台交互后回调函数的内部的this并非指向当前的vue实例,若想拿到后台回传的数据更新data里的数据,不能在回调函数中直接使用this,要用外部函数定义的变量存储的this,也就是当前vue的实例。
但这里作者更推荐使用ES6新定义的箭头函数=> 箭头函数相当于匿名函数,并且简化了函数定义。它看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。那我们上文那段代码要如何修改呢?
部分代码:
test:function(){
this.$axios.post("url",{ }).then( (res) => {console.log(this );//结果是:VueComponent {_uid: 10, _isVue: true, $options: Object…}
})
}
很明显,使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了,是不是很方便呢?学好ES6的语法,我们就可以慢慢抛弃一些费力还不便于理解的代码写法了。
当然,使用ES6的箭头函数也有一些需要注意的细节,我们不在这里展开去介绍了。希望本篇文章对你有所帮助。
阅读全文
2 0
- vue2.0使用ES6语法的箭头函数对this作用域的理解
- 深入理解ES6箭头函数的this
- es6箭头函数中this的问题
- ES6中箭头函数的作用
- 深入理解ES6箭头函数的this以及各类this面试题总结
- 深入理解ES6箭头函数的this以及各类this面试题总结
- 深入理解ES6箭头函数的this以及各类this面试题总结
- ES6,箭头函数解决this作用域问题
- ES6箭头函数和它的作用域
- ES6箭头函数和它的作用域
- 深入理解ES6箭头函数中的this
- JS的this总结(下)-ES6箭头函数this指向
- es6的箭头函数
- ES6的"箭头"函数
- es6-箭头函数中的this使用
- ES6中箭头函数的使用
- ES6中箭头函数的使用
- ES6中箭头函数的使用
- 获取区间随机数
- 空指针
- Fragment实现当前页面显示才走onResume里代码
- Unity中通过按键改变物体颜色
- 浅谈android的事件分发机制
- vue2.0使用ES6语法的箭头函数对this作用域的理解
- 「阿里巴巴编码规范」认证出炉!你的代码符合规范吗,测测便知
- 关于ie中不支持$('').get(0).style
- jquery on()和bind()区别
- sql语句出现的问题
- Android 源码详解 Volley超时重试机
- java并发
- angular ng g c xxxx命令报错 SilentError
- android之仿豆瓣写日志