Eine Funktion aus anderer Funktion in selber Klasse aufrufen

[Darknet]

Hallo ich möchte eine Funktion aus einer anderen Funktion aufrufen alle in einer Klasse.

mit this.funktionsname funktioniert dass nicht.

 safed: function () {

       
       console.log(send)
    },
    dragable: function () {

        var string = "";
        console.log(string);
       draggable($('.draggable'), {
            containment: ".ui-grid-solo",
            drag: function (e) {
 
            },
            stop: function (e) { console.log("test");
            
                this.safed();
               
            }
        });

    }

Ich möchte in stop this.safed aufrufen erhalte aber diese Fehlermeldung:

wrapped function failed : TypeError: this.safed is not a function.

Beide funktionen befinden sich in der selben Klasse.

[hellbringer]

var that = {
    safed: function () {
       console.log(send)
    },
    dragable: function () {
        var string = "";
        console.log(string);
        draggable($('.draggable'), {
            containment: ".ui-grid-solo",
            drag: function (e) {
            },
            stop: function (e) {
                console.log("test");
                that.safed();
            }
        });
    }
};

[Darknet]

Das funktioniert fast. Dass Problem damit erzeuge ich ein neues Objekt. Ich benötige aber das selbe.

var Box = { safed: function () { console.log(send) }, dragable: function () { var string = ""; console.log(string); draggable($('.draggable'), { containment: ".ui-grid-solo", drag: function (e) { }, stop: function (e) { console.log("test"); Box.safed(); } }); } };

[hellbringer]

Box ist doch ein Objekt.

[Darknet]

Ja aber ein neues also eine neue Box. Ich will aber von der Box von der ich safed aufgerufen habe in die funktion safed rein. (normalerweise mit this) in anderen sprachen.

[hellbringer]

Es ist ein und das selbe Objekt. Keine Ahnung, was du meinst. Und eine Klasse sieht man weit und breit nicht.

[Darknet]

Ich übergebe:

this.posX = (e.el.style.left);
                this.posY = (e.el.style.top);
                Box.safed();
               console.log(this.posX);

posx und posy haben wenn ich Box.safed aufrufe wieder die ausgangs Werte.

Dabei habe ich sie zuvor befüllt.

[hellbringer]

Logisch, this hat mit Box überhaupt nichts zu tun.

[Darknet]

Okay hier der komplette Code:

var Box = {
 posX: 0,
    posY: 0,
  dragable: function () {

        var string = "";
        console.log(string);
        jsPlumb.draggable($('.draggable'), {
            containment: ".ui-grid-solo",
            drag: function (e) {
                // console.log(e.el.style.left);

            },
            stop: function (e) { console.log("test");
                this.posX = (e.el.style.left);
                this.posY = (e.el.style.top);
                Box.safed();
               console.log(this.posX);
            }
        });

    },
    safed: function () {


        safe.posX = this.posX;
        safe.posY = this.posY;

       var send = JSON.stringify(safe);
      
       console.log(send);
    }
}

[hellbringer]

Box.posX = e.el.style.left;

[ehc_master]

ich bin nicht soo fit in JS, aber ist "this"

- innerhalb der funktion "dragable"
- wiederum innerhalb der funktion "jsPlumb.draggable"
- wiederum innerhalb der funktion "stop"

wirklich noch "Box" oder muss das nicht übergeben werden ?

[drsoong]

ist "this"...wirklich noch "Box"

Ich denke, das ist genau das Problem. this bezieht sich auf die jeweiligen Objekte der Selektion

  
 $('.draggable')

Du müsstest eine Variable in Box unterbringen, die sich auf Box selber bezieht.

var that = this;

und weiter unten dann

that.safed();

Wie das bei Deinem Konstrukt konkret umzusetzen ist, müsste ich jetzt auch erst mal ausprobieren. Aber es gibt ja hier genug Gurus, die das aus de Ärmel schütteln.

Hier mal eine Codeskizze wie ich das sonst immer löse:

function test() {
    var that = this;
    this.selection = $('input[type="button"]');
    
    this.doSomething = function () {
        //do something
    }
    
    this.buttonsInit = function () {
        this.selection.bind('click',function () {
           that.doSomething(); 
        }):
    }
    
    this.buttonsInit();
    
}

[hellbringer]

Oder in ECMAScript 6:

class Test {
    constructor() {
        this.selection = $('input[type="button"]');
        this.buttonsInit();
    }
    
    doSomething() {
        //do something
    }
    
    buttonsInit() {
        this.selection.bind('click', () => {
            this.doSomething();
        }):        
    }
}

(ungetestet)

[drsoong]

@hellbringer: Cool. Danke für den Hinweis. Da habe ich mal wieder die Entwicklung verschlafen...

Ein constructor wird gern genommen und die Notation des Funktionsobjekts sieht auch nicht schlecht aus.

Habe mal flugs nach Browsersupport für ECMAScript 6 geschaut. Das Beste, was ich gefunden habe ist dies hier: https://kangax.github.io/compat-table/es6/


Allerdings steht da zwar was von Destruktoren aber die Konstruktoren fehlen irgendwie. Hast Du da evtl. noch einen besseren Link?

[hellbringer]

Hast Du da evtl. noch einen besseren Link?

Nein, ich müsst selber googeln.

Üblicherweise programmiere ich in TypeScript, das übersetzt den Code automatisch in ECMAScript 5, wodurch die Browserkompatibilität gewährleistet ist.