Методы членов класса, не привязанные к TypeScript -> JavaScript - PullRequest
Новая
       30

Методы членов класса, не привязанные к TypeScript -> JavaScript

0 голосов
/ 15 апреля 2020

Я пытался написать Firefox веб-расширение, используя TypeScript. Поскольку это довольно странное усилие, расширение довольно простое; это должны быть часы. У меня есть три сценария и один класс, который экспортируется как модуль. Моя проблема в том, что при изменении контекста мои функции-члены класса, похоже, не сохраняют свои привязки к своему объекту (таким образом, становятся неопределенными). Сценарии вызываются нажатием указанной страницы: [ click content -> background -> content (resp)]. 

/**
 * Holds basic system/browser time data
 */
export class Clock {
  private time : string;
  private hh : number;
  private mm : number;
  private ss : number;

  constructor(date : Date) {
    this.hh = date.getHours();
    this.mm = date.getMinutes();
    this.ss = date.getSeconds();
    this.time = this.setTime();

    this.getTime = this.getTime.bind(this);
    this.logTime = this.logTime.bind(this);
  }

  public setTime = (): string => {
    return `${this.hh}:${this.mm}`;
  }

  public clockStringify = () : string => {
    const timeData = {
      hh : this.hh,
      mm : this.mm,
      ss : this.ss,
      time: this.time
    };

    return JSON.stringify(timeData);
  }

  public logTime() : void {
    console.log(`${this.hh}:${this.mm}`)
  }

  public getTime() : string {
    return this.time;
  }
}

/*
 * This is from the content.ts script which runs on top of the web-page in FF
 */
function handleResponse(clock : Clock) {
  console.log("Content RESP handler >> ");
  console.log("Clock info dump >>");
  console.log(clock.clockStringify());
  clock.logTime();
  console.log(clock.getTime());
}

/*
 * This from my background.ts script which runs in the background-page of FF
 */
function handleMessage(request : any, sender : any, sendResponse : any) {
  let clock = new Clock(new Date());

  console.log("Background handler >> " + request);
  console.log("Clock info dump >>");
  console.log(clock.clockStringify());
  clock.logTime();
  console.log(clock.getTime());

  sendResponse(clock);
}

Транспортированный JavaScript для Clock.ts: 

/**
 * Holds basic system/browser time data
 */
export class Clock {
    constructor(date) {
        this.setTime = () => {
            return `${this.hh}:${this.mm}`;
        };
        this.clockStringify = () => {
            const timeData = {
                hh: this.hh,
                mm: this.mm,
                ss: this.ss,
                time: this.time
            };
            return JSON.stringify(timeData);
        };
        this.hh = date.getHours();
        this.mm = date.getMinutes();
        this.ss = date.getSeconds();
        this.time = this.setTime();
        this.getTime = this.getTime.bind(this);
        this.logTime = this.logTime.bind(this);
    }
    logTime() {
        console.log(`${this.hh}:${this.mm}`);
    }
    getTime() {
        return this.time;
    }
}

JavaScript для background.ts и content.ts практически одинаковы, поэтому пропустите.

Я просмотрел все и нашел решение, которое можно увидеть выше в Clock.ts. Я в недоумении от того, что, почему они привязки не работают правильно. Я использовал разные методы ставок в Clock.ts, чтобы увидеть, есть ли разница, но нет.

Мой вывод FF: 

Webconsole context has changed
Background handler >> [object Object] background.js:6:13
Clock info dump >> background.js:7:13
{"hh":11,"mm":55,"ss":32,"time":"11:55"} background.js:8:13
11:55 Clock.js:26:17
11:55 background.js:10:13
...
Content script loaded >> content.js:1:9
Content RESP handler >> content.js:12:13
Clock info dump >> content.js:13:13
...
[extension-runners/index.js][debug] Reloading installed extensions on user request
[extension-runners/index.js][debug] Reloading all reloadable add-ons
[firefox/index.js][debug] Firefox stdout: 1586919326952 addons.xpi      WARN    Addon with ID ac86eefbc0a51ff2c5ab50e8b732e9c26c23dea6@temporary-addon already installed, older version will be disabled
[firefox/remote.js][debug] Received message from client: {"from":"root","type":"addonListChanged"}
Last extension reload: 11:55:27 GMT+0900 (Japan Standard Time)[firefox/remote.js][debug] 

[firefox/index.js][debug] Firefox stderr: JavaScript error: moz-extension://68316183-66b2-f244-be4a-a97929269985/js/content.js, line 14: TypeError: clock.clockStringify is not a function

Я перемещаюсь к "target": "ES2016" и "module": "es2015". Есть ли какая-то концепция, которую мне не хватает в привязках? Разве они не работают в одном контексте браузера?

...