Javascript：无法从回调设置成员变量

Question

I'm creating a very simple HTMLElement class for a Javascript widget. There is a button which can be used to toggle the microphone recording. I can log the resulting files to console, and everything works well. When I try to save this file in the stop() callback and assign it to a member variable I can't access it anymore.

I thought that I could use this in arrow function callbacks like this as of ES6? What am I missing here?

const MicRecorder = require("mic-recorder-to-mp3");

class Microphone extends HTMLElement {
  constructor() {
    super();

    const shadowDOM = this.attachShadow({ mode: "open" });
    this.shadowDOM = shadowDOM;
    this.shadowDOM.appendChild(template.content.cloneNode(true));
    this.toggleRecord = this.toggleRecord.bind(this);

    // Set up mic recorder
    this.recorder = new MicRecorder({
      bitRate: 128,
    });

    this.recording = false;
  }

  connectedCallback() {
    const recordButton = this.shadowRoot.querySelector("#record-button");
    recordButton.onclick = this.toggleRecord;
  }

  submit() {
   console.log(this.file);
   // Unable to access the file.
  }

  toggleRecord() {
    const recordButton = this.shadowRoot.querySelector("#record-button");

    if (recordButton.classList.contains("recording")) {
      this.recorder
        .stop()
        .getMp3()
        .then(([buffer, blob]) => {

          const file = new File(buffer, "myfile.mp3", {
            type: blob.type,
            lastModified: Date.now(),
          });
          this.file = file; // Can I set a member variable like this?
          recordButton.innerHTML = "Re-Record";
          this.recording = false;
          recordButton.classList.remove("recording");
        })
        .catch((e) => {
          alert("We could not record your message.");
        });
    } else {
      this.recorder
        .start()
        .then(() => {
          this.recording = true;
          recordButton.classList.add("recording");
        })
        .catch((e) => {
          alert("Could not start recording.");
        });
    }
  }
}

export default Microphone;

Answer 1

Try saving a reference to this to be used inside your then function

...    
if (recordButton.classList.contains("recording")) {
          var self = this;
          self.recorder
            .stop()
            .getMp3()
            .then(([buffer, blob]) => {

              const file = new File(buffer, "myfile.mp3", {
                type: blob.type,
                lastModified: Date.now(),
              });
              self.file = file;
...

Answer 2

The problem was because I didn't properly bind all class functions.

constructor() {
    super();

    const shadowDOM = this.attachShadow({ mode: "open" });
    this.shadowDOM = shadowDOM;
    this.shadowDOM.appendChild(template.content.cloneNode(true));

    this.toggleRecord = this.toggleRecord.bind(this);
    this.submit = this.submit.bind(this); // Needed this line!

    // ...
  }