Jak dostać się do właściwości z klasy będacej wyżej w hierarchii?

0

Witam. Programuję głównie w c# i zacząłem pisać klasy w js pod kątem moich potrzeb na frontendzie.
Mam sobie klasę:

class Test {
    constructor(id) {
        this.testId = id;
    }

    testId; 

    helpers = {
        getId() {
            return "test_" + this.testId;
        }
    }
}

Z helpers.getId() próbuję dostać się do właściwości testId. jak to uczynić?
wywołując:

let test = new Test("1");
console.log(test.helpers.getId());

otrzymuję:
test_undefined

Moglibyście podpowiedzieć?

3
    helpers = {
        getId() {
            return "test_" + this.testId;
        }
    }

w takim przypadku this wskazuje na helpers dlatego zadziała na przykład:

    helpers = {
        testId: 5,
        getId() {
            return "test_" + this.testId;
        }
    }
...

console.log(test.helpers.getId()); // test_5

użyj arrow function żeby zachować kontekst this:

    helpers = {
        getId: () => "test_" + this.testId;
    }
...
let test = new Test("1");
console.log(test.helpers.getId()); // test_1

możesz też zabindować funkcję:

        getId: (function() { return "test_" + this.testId; }).bind(this)

albo użyć starej sztuczki sprzed czasów arrow functions that = this:

    helpers = {
        that: this, // lepiej może np `parent` / 'owner'
        getId() {
            return "test_" + this.that.testId;
        }
    }

albo przekazać id w konstruktorze do tego helpers. Radzę nie nadużywać klas w javascript i nie próbować powielać nawyków z c# bo jednak klasy działają tu trochę inaczej

0

Jeszcze jedno pytanie pobieżnie związane z tematem: pod jakimi hasłami szukać tego w google? Bo pewnie to są podstawy podstaw ale nawet nie wiedziałem jak to w google wpisać :)
Podobna sytuacja kreuje się z metodą:

helpers = {
    that: this,
    getId(_before, _after) {
        return _before + this.that.#internal.dialogId + _after;
    }
}
open() {
    $(this.helpers.getId("#", "_Close")).on("click", function () {
        console.log("_Close");
        console.log(this);
    });
    this.#internal.dialog.show();

}

z wynikiem jest teraz gorzej, bo mam:

<button type="button" id="modalDialog1_Close" class="btn-close"></button>

EDIT:
Wygląda to nieelegancko ale działa. Da się to zrobić ładniej?

this.#internal.elements.closeButton = $("<button>", {
    type: "button",
    id: this.helpers.getId("", "_Close"),
    class: "btn-close"
});
this.#internal.elements.closeButton.data('data', this);
modalHeader.append(this.#internal.elements.closeButton);
this.#internal.elements.closeButton.on("click", function () {
    $(this).data('data')
});
0

Domknięcie albo parametr. Nie ma innej dobrej opcji (no chyba że zmienne globalne, ale to zło).

1

jeśli te helpery to koncepcyjnie częśc klasy i chcesz miec do wszystkiego dostęp, to po prostu użyj arrow functions jak @obscurity napisał.
Czyli zamiast

helpers = {
    that: this,
    getId(_before, _after) {
        return _before + this.that.#internal.dialogId + _after;
    }
}

to napisz

helpers = {
    getId: (_before, _after) => {
        return _before + this.#internal.dialogId + _after;
    }
}

Jeśli natomiast helpery mają byc niezależnym elementem od klasy, to wtedy nie powinny miec dostępu do zmiennych prywatnych danej klasy, bo łamałoby to enkapsulację. Wtedy bardziej elegancką metodą byłoby zadeklarowanie osobno klasy Helpers i przekazanie jej potrzebnych parametrów:

class Helpers {
    constructor(testId) {
      this.testId = testId; 
    }
    getId() {
      return "test_" + this.testId;
    }
}
class Test {
   constructor(testId) {
      this.helpers = new Helpers(testId)
   }
}

Pytanie więc na ile helpery są niezależnym bytem, a na ile częścią klasy. Jeśli używasz tych samych helperów w różnych klasach albo jeśli helpery stają się zbyt rozbudowane, może byc wygodnie to wydzielic do osobnej klasy. Jeśli natomiast te helpery są silnie związane z klasą i równie dobrze mogłyby byc częścią danej klasy (i np. potrzebują dostępu do prywatnych danych klasy), to wtedy lepiej to zrobic np. na domknięciu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1