class vs. function

[drsoong]

Hallo,

heute habe ich mir mal ohne Not angesehen, wie ich es machen müsste, wenn ich statt statt einer Funktion eine Klasse nutze, was ich bisher mangels Anlass noch nie gemacht habe.
Also habe ich mir diese jQuery nutzende Funktion rausgesucht und die - soweit ich es verstehe - umgeschrieben.

Funktion:

function insurance () {
    var that = this;
    this.label = $('#label-insurance');
    this.chkbox = $('input[name="insurance"]');
        if (this.label.length > 0) {
            this.chkbox.on('change', function () {
                if ($(this).prop('checked')) {
                   that.label.html(that.label.data('with'));
                } else {
                    that.label.html(that.label.data('without'));
                }
                $('#calcButton').trigger('click');
            });
        }
}

Klasse:

class insurance {
    constructor() {
        this.label = $('#label-insurance');
        this.chkbox = $('input[name="insurance"]');
        this.init();
    }

    init() {
        if (this.label.length > 0) {
            var that = this;
            this.chkbox.on('change', function () {
                if ($(this).prop('checked')) {
                   that.label.html(that.label.data('with'));
                } else {
                    that.label.html(that.label.data('without'));
                }
                $('#calcButton').trigger('click');
            });
        }
    }      
}

Jetzt frage ich mich folgendes:

1) Ist das überhaupt vernünftig umgeschrieben? Kann da mal jemand einen Gegenvorschlag machen?
2) In der Klasse kann ich anscheinend nicht mehr allgemein gültig var that = this; schreiben, sondern muss das jetzt in die Funktion init() mit aufnehmen.
Oder was wäre da der bessere Weg.
3) Die Funktion oben ist sozusagen typisch für mich und der Klassenansatz bringt mir anscheinend keine Vorteile.
Mir scheint, ich müsste meinen Progammierstil insgesamt überdenken, um dem Einsatz der Klasse etwas abzugewinnen, oder?

[hellbringer]

Eine Klasse ist im Grunde ein Bauplan für ein Objekt. Wenn du keine Objekte brauchst, brauchst du auch keine Klasse. Funktionen durch Klassen zu ersetzen macht IMHO keinen Sinn.

[tomBuilder]

ich versuiche es mal anders,

eine function welche ein objectliteral zurückgibt, lässt sich in eine classe sinnvoll portieren.
dies ist insbesondere besser lesbar, wenn das object literal functionen beinhaltet.

https://www.javascripttutorial.net/c...in-javascript/

[drsoong]

@hellbringer: Vielen Dank.

Beide Ansätze oben sind doch Baupläne für Objekte, oder?
Mir scheint das so ziemlich das Gleiche zu sein, wobei jeweils etwas andere Regeln gelten.
Wenn ich jetzt nicht zufällig sowas wie Vererbung benötige, macht es , wie Du ja auch selber sagst - keinen Sinn function gegen class zu ersetzen?!

[drsoong]

useClass.PNG

[hellbringer]

Beide Ansätze oben sind doch Baupläne für Objekte, oder?

Aber wozu gibt es dieses Objekt? Das Objekt hat doch keinerlei Methoden oder EIgenschaften, auf die von außen zugegriffen wird. Es wird nur der Konstruktor ausgeführt und das wars. Dafür braucht man keine Objekte erstellen. Da reichen auch Funktionen.

Wenn ich jetzt nicht zufällig sowas wie Vererbung benötige, macht es , wie Du ja auch selber sagst - keinen Sinn function gegen class zu ersetzen?!

Also an Vererbungen würde ich das nicht festmachen.

[drsoong]

Aber wozu gibt es dieses Objekt? Das Objekt hat doch keinerlei Methoden oder EIgenschaften, auf die von außen zugegriffen wird. Es wird nur der Konstruktor ausgeführt und das wars. Dafür braucht man keine Objekte erstellen. Da reichen auch Funktionen.

Ok, das liegt jetzt an der Auswahl meines Beispiels. Ich schreibe auch sowas:

function beispiel() {
    this.machwas = function () {
        // bla
    }
}

Na und dann meldet sich immer VS Code (TS) mit dem Hinweis ich könnte ja auch eine class declaration benutzen. Das ist übrigens der Auslöser, warum ich das Thema mal aufgerufen habe.

Jetzt aber mal andersrum gefragt: Woran würdest Du das denn festmachen? Methoden und Eigenschaften von außen gibt es ja auch bei function ?!

[kaminbausatz]

Evtl. macht es folgendes Beispiel etwas deutlicher:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .red{color:red;}
    .big{font-size:2em;}
  </style>  
</head>
<body>
  <script>
    'use strict';

    var $ = ( function (selector = null) {
      class select {
        constructor (selector){
          this.nodes = 
            (selector === 'document') ? [document] : 
            (selector === 'window') ? [window] : 
            (selector.nodeType) ? [selector] :
            document.querySelectorAll(selector)
        }      
        each = cb => (this.nodes.forEach( i => cb(i)), this)    

        addClass = myClasses => this.each( i => 
          i.classList.add(...myClasses.split(',').map(s => s.trim())), this) 

        create = myNode => 
          $(this.nodes[0].appendChild(document.createElement(myNode)))

        setText = myText => this.each( i => i.innerText = myText, this)
      }  
      return selector => new select(selector)
    })();
    $(`body`)
      .create(`h1`)
      .addClass(`red,big`)
      .setText(`myNewNode`)
  </script>
</body>
</html>

[hellbringer]

Na und dann meldet sich immer VS Code (TS) mit dem Hinweis ich könnte ja auch eine class declaration benutzen. Das ist übrigens der Auslöser, warum ich das Thema mal aufgerufen habe.

Jetzt aber mal andersrum gefragt: Woran würdest Du das denn festmachen? Methoden und Eigenschaften von außen gibt es ja auch bei function ?!

Offenbar erkennt VS Code, dass du objektorientiert programmieren möchtest und schlägt dir deshalb objektorientierte Sprachkonstrukte vor.

Man kann auch mit Funktionen alleine objektorientiert programmieren. So wurde es auch früher in JavaScript mangels Alternative gemacht. Wenn du von einer objektorientierten Programmiersprache wie Java, C# oder heutzutage auch PHP kommst, ist es in der Regel einfach in JavaScript mit den gewohnten Sprachkonstrukten zu arbeiten, also seinen Gedanken in "komische" Funktionskontruktionen zu verdrehen.

Andere Programmierer (wie z.B. ich) gehen noch weiter und verwenden TypeScript, weil es für sie wesentlich angenehmer ist.

Wenn du aber dein Leben lang nur mit Funktionen programmiert hast, wird dir wohl auch nix abgehen.

[drsoong]

Evtl. macht es folgendes Beispiel etwas deutlicher:

Absolut!

Wenn du aber dein Leben lang nur mit Funktionen programmiert hast, wird dir wohl auch nix abgehen.

So ist es wohl. Versuche halt gelegentlich über den Tellerrand zu schauen, ob da etwas ist, was ich sehr gut, dringend brauchen kann.

[Arne Drews]

Also ich nutze schon gerne die class Schreibweise, allein schon, um es für mich lesbarer zu halten. Immerhin bin ich es aus anderen Sprachen auch so gewohnt, da muss ich bei JS nicht zwingend anders rangehen.

[erc]

1) Ist das überhaupt vernünftig umgeschrieben? Kann da mal jemand einen Gegenvorschlag machen?

Nein, das ist auch kein OOP. Auch schon der eingangs gezeigte Code ist Fragwürdig. Das Script registriert ein Closure als Evend Handler. Das lässt sich auch als anonyme Funktion schreiben:

function insurance() {
    $('input[name="insurance"]').on('change', function () {
        let $label = $('#label-insurance');

        if (!$label.length) {
            return;
        }

        if ($(this).prop('checked')) {
           $label.html($label.data('with'));
        } else {
           $label.html($label.data('without'));
        }
        $('#calcButton').trigger('click');
    });
} 

Objektorientiert würde es dann irgendwie so aussehen:

class insurance {
    constructor() {
        this.$checkbox = $('input[name="insurance"]');
        this-$label = $('#label-insurance');

        this.$checkbox this.$checkbox.on('change', clicked.bind(this));
    }

    clicked(event) {
        ...

        if (this.$checkbox.prop('checked')) {
           this.$label.html(this.$label.data('with'));
        } else {
           this.$label.html(this.$label.data('without'));
        }

        //Den Button würde ich nicht unbedingt explizit ansprechen. (komplxität)
        //entweder callback oder event
        //z.B.:
        let event = new Event("insurance_changed");
        document.dispatch(event);
    }      
} 

Das bringt aber in der Form keine wirklichen Vorteile. Es sorgt vielleicht für ein konsistenterern Code Style/Pattern Language. Javascript + DOM geben da viel Spielraum für "kreativität". Ohne Erfahrung kann das schnell zu einer bunte Mischung führen.
Die Vorteile von OOP kommen erst zum tragen wenn du mehrere Instanzen und State hast.

Jetzt aber mal andersrum gefragt: Woran würdest Du das denn festmachen? Methoden und Eigenschaften von außen gibt es ja auch bei function ?!

Von der expliziten Unterscheidung seit ES6 abgesehen, sind Funktionen und Klassen in Javascript prinzipiell das selbe. Du hast in jedem Kontext this. Du kannst eine "Klasse" einfach aufrufen, und du kannst eine Funktion mit new intialisieren. Der Unterscheid ist nur, auf was this zeigt.