Access constructor's properties inside constructor

Question

I have the following constructor function.

function Tablo() {
    this.kayit_id = 0;
    this.rapor_instanse = 'rapor';
    this.kosul_durum = null;
    this.tablo_nesne = null;
    this.tablo_getir = function() {
        this.tablo_nesne = new Handsontable(
            document.getElementById(this.rapor_instanse), {
                afterGetColHeader: this.arama_filtre_element_ekle,
                beforeOnCellMouseDown: this.doNotSelectColumn,
                columnSorting: true,
                rowHeaders: true,
                currentRowClassName: 'currentRow',
                wordWrap: false,
                licenseKey: 'non-commercial-and-evaluation',
                manualColumnResize: true,
                manualRowResize: true,
                afterSelectionEnd: function(r, c, r2, c2) {
                    let suppliedarrayobject = this.tablo_nesne.getSourceDataAtRow(
                        this.tablo_nesne.toPhysicalRow(r)
                    );
                    this.kayit_id = suppliedarrayobject.kayit_id;
                }
            }
        );
    };
}

I need to access and modify the property tablo_nesne within the afterSelectionEnd function. However, the this keyword points to the wrong context. How do I fix this issue?

why document.getElementById(this.rapor_instanse) (line 7) and not just document.getElementById('rapor")? for your sake, it's the same. and simpler (I think). Also I think we would need the Handontable contructor to better understand. — LongChalk, Feb 19 '20 at 10:13
becouse in some case I need to modify it dinemcly with create new object — Hasan_Naser, Feb 19 '20 at 10:53

score 2 · Accepted Answer · answered Feb 19 '20 at 08:19

you can bind this to tablo_getir to access this at Tablo by calling bind(this) on tablo_getir

or declare a self = this at your Tablo and use it at your tablo_getir

or you can make your tablo_getir as an arrow function it should bind this automatically

score 1 · Answer 2 · answered Feb 19 '20 at 08:36

The idiomatic solution in ES6 would be to use an arrow function.

function Tablo() {
    this.kayit_id = 0;
    this.rapor_instanse = 'rapor';
    this.kosul_durum = null;
    this.tablo_nesne = null;
    this.tablo_getir = function() {
        this.tablo_nesne = new Handsontable(
            document.getElementById(this.rapor_instanse), {
                afterGetColHeader: this.arama_filtre_element_ekle,
                beforeOnCellMouseDown: this.doNotSelectColumn,
                columnSorting: true,
                rowHeaders: true,
                currentRowClassName: 'currentRow',
                wordWrap: false,
                licenseKey: 'non-commercial-and-evaluation',
                manualColumnResize: true,
                manualRowResize: true,
                afterSelectionEnd: (r, c, r2, c2) => { // This is an arrow function.
                    let suppliedarrayobject = this.tablo_nesne.getSourceDataAtRow(
                        this.tablo_nesne.toPhysicalRow(r)
                    );
                    this.kayit_id = suppliedarrayobject.kayit_id;
                }
            }
        );
    };
}

The this keyword within an arrow function is bound lexically. Hence, it'll point to the correct context.

Access constructor's properties inside constructor

2 Answers2