vue 执行函数this_vue回调函数中this无效

本文探讨了在Vue中使用回调函数时,this指针失效导致无法调用methods内函数的问题。通过使用外部变量保存this引用或者改用箭头函数,可以解决这个问题。箭头函数能确保其内部的this保持词法作用域,从而正确指向Vue实例。
摘要由CSDN通过智能技术生成

在vue中使用回调函数,发现函数体中使用this无效,无法调到methods里面定义的getCurrentExtent()函数。

handler.setInputAction(function(wheelment) {

var extent = this.getCurrentExtent(viewer);

console.dir(extent);

}, Cesium.ScreenSpaceEventType.WHEEL);

回调函数的内部的this并非指向当前的vue实例;如果要使用,用在外部函数定义的变量存储的this,也就是当前vue的实例。

var _this = this;

handler.setInputAction(function(wheelment) {

var extent = _this.getCurrentExtent(viewer);

console.dir(extent);

}, Cesium.ScreenSpaceEventType.WHEEL);

也可改为箭头函数来实现

handler.setInputAction(wheelment => {

var extent = this.getCurrentExtent(viewer);

console.dir(extent);

}, Cesium.ScreenSpaceEventType.WHEEL);

箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。此时this在箭头函数中已经按照词法作用域绑定了。很明显,使用箭头函数之后,箭头函数指向的函数内部的this已经绑定了外部的vue实例了.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值