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

你可能感兴趣的:(vue回调函数中this无效)