如何在离子3的库回调(intro.js)中修改页面范围“this”的变量?[副本]

我有一个简单的离子页面,其中包含一个名为“mood”的“global”变量,类似于“this.mood”。

在页面的一个函数中,我使用了intro.js库回调。这是我的代码:

import introJs from 'intro.js/intro.js';
[...]
var mood;
[...]
this.introJsVar=introJs.introJs();
this.mood='init';
[...]
intro() {
    var tutorialSteps={ steps: [{
      element: 'somelementid',
      intro: 'Hello world',
      position: 'right'
    }] }

    this.introJsVar.setOptions(tutorialSteps);
    this.mood='foo';               // This works
    console.log(this.mood);        // logs 'foo'

    this.introJsVar.onchange(function(targetElement) { 
        this.mood='bar';               //This DOES NOT work
    });

    this.introJsVar.start();
  }
}

我怎么能 修改 回调中变量“mood”的值?

在回调onchange中,前一个上下文似乎丢失了:“this”包含许多对library intro.js有用的变量,但会丢失在前一个上下文中声明和使用的变量,即页面中的一个变量……对正在发生的事情的解释也将非常感谢。

编辑(第二个问题和解决方案):实际上,我需要访问两个上下文:一个是包含变量“mood”的离子页面(外部),另一个是包含已发生更改(触发回调)信息的回调onchange(内部),如在使用arrow函数之前,我可以在“this”中找到用户已更改为的e intro.js教程。(变量'u currentstep': https://introjs.com/docs/intro/api/#introjsonchangeprovidedcallback )

我可以使用arrow函数来解决主要问题,但是在那一点上,上下文(这个)变成了外部的,我想,因为我可以用“this.mood”访问变量“mood”,但是我不能访问内部的上下文变量,比如“currentstep”。如果我尝试执行'this.'u currentstep',编译器会说'u currentstep变量在页面上下文中不存在(它是真的)。为了访问这两个信息,我最终找到了一个解决方案: 1)使用箭头函数而不是函数()让访问外部上下文 2)内部上下文的变量包含在this.introjsvar中(查看我的代码以了解它是什么),因此可以像这样获取当前步骤。introjsvar.\u current step