Je préfère utiliser la POO dans des projets à grande échelle comme celui sur lequel je travaille en ce moment. J'ai besoin de créer plusieurs classes en JavaScript mais, si je ne me trompe pas, il y a au moins deux façons de procéder. Quelle serait la syntaxe et pourquoi cela se ferait-il de cette façon?

Je voudrais éviter d'utiliser des bibliothèques tierces - du moins au début.
À la recherche d'autres réponses, j'ai trouvé l'article Programmation orientée objet avec JavaScript, Partie I: Héritage - Doc JavaScript qui traite de la programmation orientée objet en JavaScript. Existe-t-il une meilleure façon de faire l'héritage?

Voici la façon de le faire sans utiliser de bibliothèques externes:

// Define a class like this
function Person(name, gender){

   // Add object properties like this
   this.name = name;
   this.gender = gender;
}

// Add methods like this.  All Person objects will be able to invoke this
Person.prototype.speak = function(){
    alert("Howdy, my name is" + this.name);
};

// Instantiate new objects with 'new'
var person = new Person("Bob", "M");

// Invoke methods like this
person.speak(); // alerts "Howdy, my name is Bob"

Maintenant, la vraie réponse est beaucoup plus complexe que cela. Par exemple, il n'y a pas de classes en JavaScript. JavaScript utilise un prototypeschéma d'héritage basé sur.

De plus, il existe de nombreuses bibliothèques JavaScript populaires qui ont leur propre style d'approximation des fonctionnalités de classe en JavaScript. Vous voudrez vérifier au moins Prototype et jQuery .

Décider lequel d'entre eux est le "meilleur" est un excellent moyen de commencer une guerre sainte sur Stack Overflow. Si vous vous lancez dans un projet plus volumineux, il vaut vraiment la peine d'apprendre une bibliothèque populaire et de le faire à sa manière. Je suis un type Prototype, mais Stack Overflow semble pencher vers jQuery.

Dans la mesure où il n'y a qu'une "façon de le faire", sans aucune dépendance vis-à-vis des bibliothèques externes, la façon dont j'ai écrit est à peu près la même.

La meilleure façon de définir une classe en JavaScript est de ne pas définir de classe.

Sérieusement.

Il existe plusieurs variantes de l'orientation objet, dont certaines sont:

• OO basé sur une classe (introduit pour la première fois par Smalltalk)
• OO basé sur un prototype (introduit pour la première fois par Self)
• OO multiméthodes (présenté pour la première fois par CommonLoops, je pense)
• OO basé sur un prédicat (aucune idée)

Et probablement d'autres que je ne connais pas.

JavaScript implémente OO basé sur un prototype. Dans OO basé sur un prototype, de nouveaux objets sont créés en copiant d'autres objets (au lieu d'être instanciés à partir d'un modèle de classe) et les méthodes vivent directement dans les objets plutôt que dans les classes. L'héritage se fait par délégation: si un objet n'a pas de méthode ou de propriété, il est recherché sur son ou ses prototypes (c'est-à-dire l'objet à partir duquel il a été cloné), puis sur les prototypes du prototype et ainsi de suite.

En d'autres termes: il n'y a pas de classes.

JavaScript a en fait une belle modification de ce modèle: les constructeurs. Non seulement vous pouvez créer des objets en copiant ceux qui existent déjà, mais vous pouvez aussi les construire "à partir de rien", pour ainsi dire. Si vous appelez une fonction avec le newmot - clé, cette fonction devient un constructeur et le thismot - clé ne pointera pas vers l'objet actuel mais vers un objet "vide" nouvellement créé. Ainsi, vous pouvez configurer un objet comme vous le souhaitez. De cette façon, les constructeurs JavaScript peuvent assumer l'un des rôles des classes dans les OO classiques basés sur les classes: servir de modèle ou de modèle pour de nouveaux objets.

Maintenant, JavaScript est un langage très puissant, il est donc assez facile d'implémenter un système OO basé sur des classes dans JavaScript si vous le souhaitez. Cependant, vous ne devriez le faire que si vous en avez vraiment besoin et pas seulement parce que c'est ainsi que Java le fait.

Classes ES2015

Dans la spécification ES2015, vous pouvez utiliser la syntaxe de classe qui est juste du sucre sur le système prototype.

class Person {
  constructor(name) {
    this.name = name;
  }
  toString() {
    return `My name is ${ this.name }.`;
  }
}

class Employee extends Person {
  constructor(name, hours) {
    super(name);
    this.hours = hours;
  }
  toString() {
    return `${ super.toString() } I work ${ this.hours } hours.`;
  }
}

Avantages

Le principal avantage est que les outils d'analyse statique trouvent plus facile de cibler cette syntaxe. Il est également plus facile pour d'autres venant de langues basées sur les classes d'utiliser la langue comme polyglotte.

Avertissements

Méfiez-vous de ses limites actuelles. Pour obtenir des propriétés privées, il faut recourir à l' utilisation de symboles ou de WeakMaps . Dans les versions futures, les classes seront très probablement étendues pour inclure ces fonctionnalités manquantes.

Soutien

Le support du navigateur n'est pas très bon pour le moment (pris en charge par presque tout le monde sauf IE), mais vous pouvez utiliser ces fonctionnalités maintenant avec un transpilateur comme Babel .

Ressources

• Cours dans ECMAScript 6 (sémantique finale)
• Quelle? Attendre. Vraiment? Oh non! (un article sur les classes ES6 et la confidentialité)
• Tableau de compatibilité - Classes
• Babel - Cours

Je préfère utiliser celui de Daniel X. Moore {SUPER: SYSTEM}. Il s'agit d'une discipline qui offre des avantages tels que les vraies variables d'instance, l'héritage basé sur les traits, les hiérarchies de classes et les options de configuration. L'exemple ci-dessous illustre l'utilisation de vraies variables d'instance, ce qui, selon moi, est le plus grand avantage. Si vous n'avez pas besoin de variables d'instance et êtes satisfait uniquement des variables publiques ou privées, il existe probablement des systèmes plus simples.

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  return {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };
}

var fogel = Person({
  age: "old enough"
});
fogel.introduce(); // "Hi I'm McLovin and I'm old enough"

Wow, ce n'est pas vraiment très utile en soi, mais jetez un œil à l'ajout d'une sous-classe:

function Ninja(I) {
  I = I || {};

  Object.reverseMerge(I, {
    belt: "black"
  });

  // Ninja is a subclass of person
  return Object.extend(Person(I), {
    greetChallenger: function() {
      return "In all my " + I.age + " years as a ninja, I've never met a challenger as worthy as you...";
    }
  });
}

var resig = Ninja({name: "John Resig"});

resig.introduce(); // "Hi I'm John Resig and I'm 25"

Un autre avantage est la possibilité d'avoir des modules et un héritage basé sur les traits.

// The Bindable module
function Bindable() {

  var eventCallbacks = {};

  return {
    bind: function(event, callback) {
      eventCallbacks[event] = eventCallbacks[event] || [];

      eventCallbacks[event].push(callback);
    },

    trigger: function(event) {
      var callbacks = eventCallbacks[event];

      if(callbacks && callbacks.length) {
        var self = this;
        callbacks.forEach(function(callback) {
          callback(self);
        });
      }
    },
  };
}

Un exemple de la classe person inclut le module bindable.

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  var self = {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };

  // Including the Bindable module
  Object.extend(self, Bindable());

  return self;
}

var person = Person();
person.bind("eat", function() {
  alert(person.introduce() + " and I'm eating!");
});

person.trigger("eat"); // Blasts the alert!

Divulgation: je suis Daniel X. Moore et voici mon {SUPER: SYSTEM}. C'est le meilleur moyen de définir une classe en JavaScript.

var Animal = function(options) {
    var name = options.name;
    var animal = {};

    animal.getName = function() {
        return name;
    };

    var somePrivateMethod = function() {

    };

    return animal;
};

// usage
var cat = Animal({name: 'tiger'});

Voici les façons de créer des objets en javascript, que j'ai utilisé jusqu'à présent

Exemple 1:

obj = new Object();
obj.name = 'test';
obj.sayHello = function() {
    console.log('Hello '+ this.name);
}

Exemple 2:

obj = {};
obj.name = 'test';
obj.sayHello = function() {
    console.log('Hello '+ this.name);
}
obj.sayHello();

Exemple 3:

var obj = function(nameParam) {
    this.name = nameParam;
}
obj.prototype.sayHello = function() {
    console.log('Hello '+ this.name);
}

Exemple 4: Avantages réels d'Object.create (). veuillez consulter [ce lien]

var Obj = {
    init: function(nameParam) {
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var usrObj = Object.create(Obj);  // <== one level of inheritance

usrObj.init('Bob');
usrObj.sayHello();

Exemple 5 (Object.create de Crockford personnalisé):

Object.build = function(o) {
   var initArgs = Array.prototype.slice.call(arguments,1)
   function F() {
      if((typeof o.init === 'function') && initArgs.length) {
         o.init.apply(this,initArgs)
      }
   }
   F.prototype = o
   return new F()
}
MY_GLOBAL = {i: 1, nextId: function(){return this.i++}}  // For example

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.build(userB, 'Bob');  // Different from your code
bob.sayHello();

Une classe est définie comme ceci:

class Person {
    constructor(strName, numAge) {
        this.name = strName;
        this.age = numAge;
    }

    toString() {
        return '((Class::Person) named ' + this.name + ' & of age ' + this.age + ')';
    }
}

let objPerson = new Person("Bob",33);
console.log(objPerson.toString());

Je pense que vous devriez lire l' héritage prototypique de Douglas Crockford en JavaScript et l'héritage classique en JavaScript .

Exemples de sa page:

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};

Effet? Il vous permettra d'ajouter des méthodes de manière plus élégante:

function Parenizor(value) {
    this.setValue(value);
}

Parenizor.method('setValue', function (value) {
    this.value = value;
    return this;
});

Je recommande également ses vidéos: JavaScript avancé .

Vous pouvez trouver plus de vidéos sur sa page: http://javascript.crockford.com/ Dans le livre de John Reisig, vous pouvez trouver de nombreux exemples sur le site Web de Douglas Crockfor.

Parce que je n'admettrai pas le plan d'usine YUI / Crockford et parce que j'aime garder les choses autonomes et extensibles, c'est ma variation:

function Person(params)
{
  this.name = params.name || defaultnamevalue;
  this.role = params.role || defaultrolevalue;

  if(typeof(this.speak)=='undefined') //guarantees one time prototyping
  {
    Person.prototype.speak = function() {/* do whatever */};
  }
}

var Robert = new Person({name:'Bob'});

où idéalement le test typeof est sur quelque chose comme la première méthode prototypée

Si vous optez pour la simplicité, vous pouvez éviter complètement le "nouveau" mot clé et utiliser simplement des méthodes d'usine. Je préfère cela parfois, car j'aime utiliser JSON pour créer des objets.

function getSomeObj(var1, var2){
  var obj = {
     instancevar1: var1,
     instancevar2: var2,
     someMethod: function(param)
     {  
          //stuff; 
     }
  };
  return obj;
}

var myobj = getSomeObj("var1", "var2");
myobj.someMethod("bla");

Cependant, je ne sais pas quel est le niveau de performance pour les gros objets.

var Student = (function () {
    function Student(firstname, lastname) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.fullname = firstname + " " + lastname;
    }

    Student.prototype.sayMyName = function () {
        return this.fullname;
    };

    return Student;
}());

var user = new Student("Jane", "User");
var user_fullname = user.sayMyName();

C'est la façon dont TypeScript compile la classe avec le constructeur en JavaScript.

La manière la plus simple est:

function Foo(a) {
  var that=this;

  function privateMethod() { .. }

  // public methods
  that.add = function(b) {
    return a + b;
  };
  that.avg = function(b) {
    return that.add(b) / 2; // calling another public method
  };
}

var x = new Foo(10);
alert(x.add(2)); // 12
alert(x.avg(20)); // 15

La raison en thatest que cela thispeut être lié à autre chose si vous donnez une méthode en tant que gestionnaire d'événements, vous enregistrez donc la valeur pendant l'instanciation et l'utilisez plus tard.

Edit: ce n'est certainement pas le meilleur moyen, juste un moyen simple. J'attends aussi de bonnes réponses!

Vous souhaitez probablement créer un type à l'aide du modèle de pliage:

    // Here is the constructor section.
    var myType = function () {
        var N = {}, // Enclosed (private) members are here.
            X = this; // Exposed (public) members are here.

        (function ENCLOSED_FIELDS() {
            N.toggle = false;
            N.text = '';
        }());

        (function EXPOSED_FIELDS() {
            X.count = 0;
            X.numbers = [1, 2, 3];
        }());

        // The properties below have access to the enclosed fields.
        // Careful with functions exposed within the closure of the
        // constructor, each new instance will have it's own copy.
        (function EXPOSED_PROPERTIES_WITHIN_CONSTRUCTOR() {
            Object.defineProperty(X, 'toggle', {
                get: function () {
                    var before = N.toggle;
                    N.toggle = !N.toggle;
                    return before;
                }
            });

            Object.defineProperty(X, 'text', {
                get: function () {
                    return N.text;
                },
                set: function (value) {
                    N.text = value;
                }
            });
        }());
    };

    // Here is the prototype section.
    (function PROTOTYPE() {
        var P = myType.prototype;

        (function EXPOSED_PROPERTIES_WITHIN_PROTOTYPE() {
            Object.defineProperty(P, 'numberLength', {
                get: function () {
                    return this.numbers.length;
                }
            });
        }());

        (function EXPOSED_METHODS() {
            P.incrementNumbersByCount = function () {
                var i;
                for (i = 0; i < this.numbers.length; i++) {
                    this.numbers[i] += this.count;
                }
            };
            P.tweak = function () {
                if (this.toggle) {
                    this.count++;
                }
                this.text = 'tweaked';
            };
        }());
    }());

Ce code vous donnera un type appelé myType . Il aura des champs privés internes appelés bascule et texte . Il aura également ces membres exposés: les champs comptent et nombre ; les propriétés bascule , text et numberLength ; les méthodes incrementNumbersByCount et tweak .

Le modèle de pliage est détaillé ici: Modèle de pliage Javascript

Code golf pour la réponse de @ liammclennan .

var Animal = function (args) {
  return {
    name: args.name,

    getName: function () {
      return this.name; // member access
    },

    callGetName: function () {
      return this.getName(); // method call
    }
  };
};

var cat = Animal({ name: 'tiger' });
console.log(cat.callGetName());

MooTools (My Object Oriented Tools) est centré sur l'idée de classes . Vous pouvez même étendre et implémenter avec héritage.

Une fois maîtrisé, il permet un javascript puissant et ridiculement réutilisable.

Classes basées sur des objets avec héritage

var baseObject = 
{
     // Replication / Constructor function
     new : function(){
         return Object.create(this);   
     },

    aProperty : null,
    aMethod : function(param){
      alert("Heres your " + param + "!");
    },
}


newObject = baseObject.new();
newObject.aProperty = "Hello";

anotherObject = Object.create(baseObject); 
anotherObject.aProperty = "There";

console.log(newObject.aProperty) // "Hello"
console.log(anotherObject.aProperty) // "There"
console.log(baseObject.aProperty) // null

Simple, doux et fait tout.

Une base

function Base(kind) {
    this.kind = kind;
}

Une classe

// Shared var
var _greeting;

(function _init() {
    Class.prototype = new Base();
    Class.prototype.constructor = Class;
    Class.prototype.log = function() { _log.apply(this, arguments); }
    _greeting = "Good afternoon!";
})();

function Class(name, kind) {
    Base.call(this, kind);
    this.name = name;
}

// Shared function
function _log() {
    console.log(_greeting + " Me name is " + this.name + " and I'm a " + this.kind);
}

action

var c = new Class("Joe", "Object");
c.log(); // "Good afternoon! Me name is Joe and I'm a Object"

Sur la base de l'exemple de Triptyque, cela pourrait même être plus simple:

    // Define a class and instantiate it
    var ThePerson = new function Person(name, gender) {
        // Add class data members
        this.name = name;
        this.gender = gender;
        // Add class methods
        this.hello = function () { alert('Hello, this is ' + this.name); }
    }("Bob", "M"); // this instantiates the 'new' object

    // Use the object
    ThePerson.hello(); // alerts "Hello, this is Bob"

Cela ne crée qu'une seule instance d'objet, mais est toujours utile si vous souhaitez encapsuler un tas de noms de variable et de méthodes dans une classe. Normalement, il n'y aurait pas les arguments "Bob, M" au constructeur, par exemple si les méthodes étaient des appels à un système avec ses propres données, comme une base de données ou un réseau.

Je suis encore trop nouveau avec JS pour voir pourquoi cela n'utilise pas la prototypechose.

JavaScript est orienté objet , mais il est radicalement différent des autres langages OOP comme Java, C # ou C ++. N'essayez pas de le comprendre comme ça. Jetez cette vieille connaissance et recommencez. JavaScript a besoin d'une réflexion différente.

Je suggère d'obtenir un bon manuel ou quelque chose sur le sujet. J'ai moi-même trouvé les tutoriels ExtJS les meilleurs pour moi, même si je n'ai pas utilisé le framework avant ou après l'avoir lu. Mais cela donne une bonne explication de ce qui se passe dans le monde JavaScript. Désolé, il semble que ce contenu ait été supprimé. Voici un lien vers la copie archive.org à la place. Fonctionne aujourd'hui. : P