Wie machen Sie Klassen in JavaScript?

Question

Wie machen Sie "Klassen" in JavaScript !?

Ich verwende:

function classFoo() 
{ 
    var classLevelVariable = 0; 

    this.classFunction = function() 
    { 
     alert("The classFunction has been called."); 
     classFunction2(); //Crash. classFunction2 is "undefined." 
    } 

    this.classFunction2 = function() 
    { 
     alert("classFunction2 called."); 
    } 
} 

konnte ich nie Konstrukteuren die Arbeit. Versucht

this.New = function(arguments) 

Was einmal funktioniert hat, aber nicht in einer zweiten Klasse. Also habe ich diese vollständig aufgegeben und meine eigenen "Initialize" -Funktionen verwendet, die als Konstruktoren fungieren.

Die Seltsamkeit mit ihm funktioniert einmal, aber nicht zweimal, lässt mich denken, typographische Fehler zwischen den beiden Klassen ... aber ich denke, in 19 Jahren der Codierung, dass das ist es wahrscheinlich nicht.

Ich verwende den Debugger von Chrome und erhalte keine Fehler, außer dass die zweite Funktion beim Aufruf nicht definiert ist.

Answer 1

JavaScript ist eine prototypbasierte Programmiersprache. Das Konzept einer Klasse existiert nicht oder das Konzept einer Klasse ist dasselbe wie ein Objekt. Es ist ziemlich verschieden von der Programmiersprache Java. Lass dich nicht von ihren Namen täuschen, die Ähnlichkeiten enden dort.

Ich fragte this question ich während zurück. Ich habe eine Antwort mit einem netten Link zu these presentation slides von John Resig bekommen. Schauen Sie sich das an und sehen Sie, ob es hilft, JavaScript und Prototypenketten zu verstehen.

Answer 2

Javascript verwendet keine klassenbasierte Vererbung. Also können Sie keine Klassen in Javascript erstellen, außer sie mit workarounds zu emulieren, die IMHO plump und kompliziert sind.

Javascript ist eine prototypische Sprache. Mit dem Schlüsselwort new wird ein neues Objekt basierend auf der Prototypeigenschaft des Konstruktorobjekts erstellt.

Sie können eine Vorstellung bekommen, wie Sie prototypal Vererbung könnte ein neues Objekt instanziiert hier auf einem prototypischen Objekt basiert: http://javascript.crockford.com/prototypal.html

Answer 3

Here ist ein guter Artikel auf sitepoint.com über objektorientierte Programmierung in JavaScript.

This eins auf javascriptkit.com ist einfacher.

Sie eine Funktion verwenden, kann ein Objekt legen Sie seine Eigenschaften und Funktionen wie folgt erstellt:

person = new Object() 
person.name = "Tim Scarfe" 
person.height = "6Ft" 

person.run = function() { 
    this.state = "running" 
    this.speed = "4ms^-1" 
} 

oder Verwendung Bauer:

function person(name,height,speed){ 
    this.name = name; 
    this.height = height; 
    this.speed = speed; 
} 

var p1=new person('tom', '6ft','15kmph'); 

alert(p1.height); 

oder Sie können Prototyping verwenden, um Objekte zu erweitern:

person.prototype.sayHello = function(){alert("Hi, I'm " + name;} 

var p2 = new person('sam', '5.9ft', '12kmph'); 
p2.sayHello();//alert-> Hi, I'm sam 

detailliertere Informationen finden Sie auf den verknüpften Seiten.

Answer 4

Mit dem Prototyp JavaScript-Framework.

Answer 5

Ich fühle, dass Ihre ursprüngliche Ratte (siehe Versionsgeschichte der Frage) eine Antwort verdient.Es ist sehr gegen den Geist der Programmierung und Informatik, meiner Meinung nach, eine Sprache gebrochen zu erklären, nur weil Sie nicht können make it go.

Bitte verzeihen Sie mir, wenn ich Sie beleidige, wenn ich sage, dass ich überrascht bin, dass sie Leuten mit solch paradigmatischer Ignoranz CS-Abschlüsse geben können. Als ich vor ungefähr 5 Jahren zur Schule ging, habe ich meine Aufgaben in 6 verschiedenen Sprachen erledigt: MIPS, Verilog, Scheme, Java, C/C++ und Python. Wir verwendeten viele Paradigmen, einschließlich funktionaler und OOP, aber auch anderer Stile. Wenn Sie diesen verschiedenen Perspektiven, von denen keine neu sind, nicht ausgesetzt waren, ist Ihre Ausbildung nicht vollständig.

Ist Ihnen aufgefallen, dass das, was Sie als kanonische OOP betrachten, ist, nur eine Formulierung der OOP-Prinzipien? In Javascript-Objekten instanziiert von einem "Prototyp", und es ist nicht das gleiche wie eine Klasse. Wenn Sie erwarten, dass es wie eine klassenbasierte OOP-Sprache funktioniert, wird es Ihre Erwartungen nicht erfüllen. Java und C++ sind nicht der Goldstandard von OOP, noch ist OOP das All-End-Programm.

Wenn man bedenkt, die erstaunlichen Anwendungen, die in Javascript in den letzten 3-5 Jahren geschrieben wurden, ist es erstaunlich, dass eine Person eine Anweisung wie folgt machen:

Man würde denken, werden wir unser Bestes gelten würde Codierung Praktiken in den letzten sechs Jahrzehnten hinein. Nein natürlich nicht. Was haben wir? Funktionen innerhalb von Funktionen ... etwas seltsame Bastardisierung von Klassen. Komplett ohne Konsistenz ...

zu sagen, dass trotz der glänzenden Leistungen von Teams brillanter Entwickler Javascript gemacht, wird die Sprache, weil gebrochen Sie Schwierigkeiten ist es zu verstehen haben, na ja, erstaunlich.

Bitte beachten Sie, dass Sie, anstatt der Sprache fehlerhaft zu sein, möglicherweise nicht die notwendige Perspektive haben, um sie zu verstehen.

---

PS, Sie erwähnten, dass Sie "JavaScript zu AVOID FLASH verwenden!" Es scheint, als ob Sie eine sehr schlechte Strategie haben, um Fakten zu ermitteln, da Javascript und Actionscript beide dieselbe Spezifikation implementieren: ECMAScript.

Answer 6

JavaScript ist ein Prototyping Language, so sind die Dinge ein wenig anders.

Hier ist ein Code-Snippet zu erklären:

(function(){ // create an isolated scope 
    // My Object we created directly 
    var myObject = { 
     a: function(x,y) { 
      console.log('a'); 
     }, 
     b: function(x,y) { 
      console.log('b'); 
      this.a(x,y); 
     } 
    }; 
})(); 

(function(){ // create an isolated scope 

    // Create a Object by using a Class + Constructor 
    var myClass = function(x,y) { 
     console.log('myClass: constructor'); 
     this.b(x,y); 
    }; 
    myClass.prototype = { 
     a: function(x,y) { 
      console.log('myClass: a'); 
     }, 
     b: function(x,y) { 
      console.log('myClass: b'); 
      this.a(x,y); 
     } 
    }; 

    // Define a function that should never inherit 
    myClass.c = function(x,y) { 
     console.log('myClass: c'); 
     this.a(x,y); 
    }; 

    // Create Object from Class 
    var myObject = new myClass(); 
    // Will output: 
    // myClass: constructor 
    // myClass: b 
    // myClass: a 

    // Define a function that should never inherit 
    myObject.d = function(x,y) { 
     console.log('myObject: d'); 
     this.a(x,y); 
    }; 

    // Test the world is roung 
    console.log(typeof myClass.c, 'should be undefined...'); 
    console.log(typeof myClass.d, 'should be function...'); 
})(); 

(function(){ // create an isolated scope 
    // If you are using a framework like jQuery, you can obtain inheritance like so 

    // Create a Object by using a Class + Constructor 
    var myClass = function(x,y) { 
     console.log('myClass: constructor'); 
     this.b(x,y); 
    }; 
    myClass.prototype = { 
     a: function(x,y) { 
      console.log('myClass: a'); 
     }, 
     b: function(x,y) { 
      console.log('myClass: b'); 
      this.a(x,y); 
     } 
    }; 

    // Create new Class that inherits 
    var myOtherClass = function(x,y) { 
     console.log('myOtherClass: constructor'); 
     this.b(x,y); 
    }; 
    $.extend(myOtherClass.prototype, myClass.prototype, { 
     b: function(x,y) { 
      console.log('myOtherClass: b'); 
      this.a(x,y); 
     } 
    }); 

    // Create Object from Class 
    var myOtherObject = new myOtherClass(); 
    // Will output: 
    // myOtherClass: constructor 
    // myOtherClass: b 
    // myClass: a 
})(); 

(function(){ // create an isolated scope 
    // Prototypes are useful for extending existing classes for the future 
    // Such that you can add methods and variables to say the String class 
    // To obtain more functionality 
    String.prototype.alert = function(){ 
     alert(this); 
    }; 
    "Hello, this will be alerted.".alert(); 
    // Will alert: 
    // Hello, this will be alerted. 
})(); 

Es gibt Bibliotheken mit diesem wie helfen:

• Mootools Klasse: http://mootools.net/docs/core/Class/Class
• jQuery BalClass: http://www.balupton.com/projects/jquery-sparkle/#using