web-dev-qa-db-fra.com

Mot clé de classe en Javascript

Selon cet article il devrait s'agir d'un moyen Javascript 2.0 de définir une classe. Cependant, je n'ai jamais vu cela dans la pratique. Ainsi la question. Comment utiliser le mot-clé de classe et quelle est la différence entre les façons de faire en Javascript 1.x?

javascriptclass
36
Vladimir Kocjancic

La raison pour laquelle vous n'avez jamais vu le mot clé class utilisé dans la pratique est que toutes les implémentations actuelles de JavaScript sont des versions 1.x.

JavaScript 2.0 a été intégré à ECMAScript 4, qui était plutôt impopulaire et n’a donc jamais été intégré au monde réel.

Donc, pour répondre à votre question, comment utilisez-vous le mot clé class? Tu ne peux pas.

46
Dave Webb

Je sais que c’est un vieux post, mais à partir d’aujourd’hui, avec l’avènement de ECMAScript 6 , nous pouvons déclarer des classes javascript.

La syntaxe est la suivante: 

class Person{
  constructor(name){
    this.name = name;
  }
  printName(){
    console.log('Name is '+this.name);
  }
}
var john = new Person('John Doe');
john.printName(); // This prints 'Name is John Doe'

Vous trouverez un guide complet à ce sujet dans cet article

41
Akhil Arjun

Vous ne l'avez jamais vu en pratique, car pratiquement rien ne prend en charge JavaScript 2.0. Cette ébauche provient d'une spécification qui est morte avant d'être autre chose qu'une ébauche.

5
Quentin

Vous pouvez toujours construire des classes dans JS bien sûr en utilisant un prototype!

var foo = function() {
  this.hurrah = "yay!";
  return this;
}

foo.prototype.doit() {
  alert(this.hurrah);
}
1
casey

Juste pour ajouter la méthode de création de classe ECMA5.

Notez qu'il n'a pas de fonction constructeur de cette façon (mais vous pouvez déclencher une fonction init si vous le souhaitez)

        var Class = {
          el: null,
          socket: null,

          init: function (params) {

            if (!(this.el instanceof HTMLElement)) {
              throw new Error('Chat room has no DOM element to attach on.');
            }

            return this.doStuff();

          },
          doStuff: function (params) {
            return this;
          }
        };

    var instanceofClass = Object.create(Class, {
      el: {
        value: document.body.querySelector('.what ever')
      },
      someMoreData: {
        value: [0,5,7,3]
      }
    }).init();

* modifier la description déplacée du bloc de code

0
Kewin

Résumé

Dans ES6, le mot clé class a été introduit. Le mot clé class n'est autre que du sucre syntaxique en plus du modèle d'héritage prototypique existant. Les classes en javascript sont fondamentalement une autre manière d'écrire des fonctions de constructeur pouvant être utilisées pour créer un nouvel objet à l'aide du mot clé new. 

Exemple

class Person {

  constructor(name) {
    this.name = name;
  }
  talk() { console.log('hi'); }
}

const me = new Person('Willem');

console.log(typeof Person) 
// logs function, Person class is just another constructor function under the hood

console.log(me.__proto__ === Person.prototype) 
// logs true, classes just use the same prototypal inheritance pattern which is used by constructor functions. 
// An object created with the new keyword gets a __proto__ property on it which is a reference to the prototype property on a constructor function.

Dans l'exemple ci-dessus, il est possible d'observer dans le premier journal que les classes créent à partir du mot clé class sont en réalité des fonctions cachées. 

console.log(typeof Person) // logs 'function'

Les classes es6 utilisent le même modèle d'héritage prototype que celui utilisé par les fonctions du constructeur. Voici un autre exemple pour illustrer ce comportement:

class Dog {

  constructor (name) {
      this.name = name;
  }
  
  bark () { console.log('bark') };

}

let doggie = new Dog('fluffy');

doggie.bark(); // logs bark


Dog.prototype.bark = () => console.log('woof');  
// changing the prototype of Dog, doggie refers to this with its __proto__ property. 
//Therefore doggie bark method has also changed.


doggie.bark(); // logs woof

L'exemple ci-dessus montre que la méthode d'aboiement de n'importe quelle instance de chien peut être modifiée à l'exécution. En effet, la méthode d'aboiement de tout objet créé avec la classe Dog fait simplement référence à cette fonction.

0
Willem van der Veen

Si vous avez un arrière-plan Java ou C #, voici comment définir une classe en JavaScript

var MyClass = function (f, l){//constructor 
    //private members
    var firstName = f,
        lastName = l,
        fullName = function () { //fullName is a private function
            return firstName + " " + lastName;
        };
    return {
        //public members
        getFullName: fullName 
    };
}

var output = document.getElementById('Output'); //<div id="Output"></div>
var myName = new MyClass("First", "Last");
output.innerHTML = myName.getFullName();
0
MAlshehri