vue回调函数中this无效

在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实例了.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,214评论 0 29
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,848评论 0 6
  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,754评论 0 1
  • 微信群的朋友建议尝试28天左手刷牙,可以体会从笨拙到熟练的过程。貌似从小到大都没有好好体会过从笨拙到熟练的整个...
    张霄_8127阅读 717评论 6 1
  • ※前※记※ 在虚拟货币市场逐渐进入熊市,在资本血腥洗礼过后,人们的重心终于从疯狂的IOC炒作进入到了回归项目自身价...
    老菲菜阅读 468评论 0 0

友情链接更多精彩内容