Classe et méthode statique en JavaScript

Question

Je sais que ça va marcher :

function Foo() {};
Foo.prototype.talk = function () {
    alert('hello~\n');
};

var a = new Foo;
a.talk(); // 'hello~\n'

Mais si je veux appeler

Foo.talk() // this will not work
Foo.prototype.talk() // this works correctly

Je trouve des méthodes pour faire Foo.talk travail,

1. Foo.__proto__ = Foo.prototype
2. Foo.talk = Foo.prototype.talk

Y a-t-il d'autres façons de procéder ? Je ne sais pas si c'est bien de le faire. Utilisez-vous des méthodes de classe ou des méthodes statiques dans votre code JavaScript ?

Answer 1

Les appels aux méthodes statiques sont effectués directement sur la classe et ne sont pas appelables sur les instances de la classe. Les méthodes statiques sont souvent utilisées pour créer une fonction utilitaire

Description assez claire

Tiré directement de mozilla.org

Foo doit être lié à votre classe Ensuite, lorsque vous créez une nouvelle instance, vous pouvez appeler myNewInstance.foo(). Si vous importez votre classe, vous pouvez appeler une méthode statique

Answer 2

Dans votre cas, si vous voulez Foo.talk() :

function Foo() {};
// But use Foo.talk would be inefficient
Foo.talk = function () {
    alert('hello~\n');
};

Foo.talk(); // 'hello~\n'

Mais c'est un moyen inefficace de mettre en œuvre, en utilisant prototype est meilleur.

---

Une autre façon, My way, est définie comme une classe statique :

var Foo = new function() {
  this.talk = function () {
    alert('hello~\n');
    };
};

Foo.talk(); // 'hello~\n'

La classe statique ci-dessus n'a pas besoin d'utiliser prototype car il ne sera construit qu'une seule fois en tant qu'usage statique.

https://github.com/yidas/js-design-patterns/tree/master/class

Answer 3

Quand j'ai été confronté à une telle situation, j'ai fait quelque chose comme ça :

Logger = {
    info: function (message, tag) {
        var fullMessage = '';        
        fullMessage = this._getFormatedMessage(message, tag);
        if (loggerEnabled) {
            console.log(fullMessage);
        }
    },
    warning: function (message, tag) {
        var fullMessage = '';
        fullMessage = this._getFormatedMessage(message, tag);
        if (loggerEnabled) {
            console.warn(fullMessage);`enter code here`
        }
    },
    _getFormatedMessage: function () {}
};

Je peux donc maintenant appeler la méthode info comme Logger.info("my Msg", "Tag");

Answer 4

Javascript n'a pas de classes à proprement parler. Il utilise plutôt un système d'héritage prototypique dans lequel les objets "héritent" d'autres objets via leur chaîne de prototypes. Ce système s'explique mieux par le code lui-même :

function Foo() {};
// creates a new function object

Foo.prototype.talk = function () {
    console.log('hello~\n');
};
// put a new function (object) on the prototype (object) of the Foo function object

var a = new Foo;
// When foo is created using the new keyword it automatically has a reference 
// to the prototype property of the Foo function

// We can show this with the following code
console.log(Object.getPrototypeOf(a) === Foo.prototype); 

a.talk(); // 'hello~\n'
// When the talk method is invoked it will first look on the object a for the talk method,
// when this is not present it will look on the prototype of a (i.e. Foo.prototype)

// When you want to call
// Foo.talk();
// this will not work because you haven't put the talk() property on the Foo
// function object. Rather it is located on the prototype property of Foo.

// We could make it work like this:
Foo.sayhi = function () {
    console.log('hello there');
};

Foo.sayhi();
// This works now. However it will not be present on the prototype chain 
// of objects we create out of Foo

Answer 5

Il existe trois façons d'implémenter les méthodes et les propriétés sur les objets de fonction ou de classe, et sur leurs instances.

1. Sur la classe (ou fonction) elle-même : Foo.method() o Foo.prop . Ce sont des méthodes ou des propriétés statiques
2. Sur son prototype : Foo.prototype.method() o Foo.prototype.prop . Une fois créées, les instances hériteront de ces objets via le prototype qui est {method:function(){...}, prop:...} . Ainsi, le foo recevra, en tant que prototype, une copie de l'objet Foo.prototype objet.
3. Sur l'instance elle-même : la méthode ou la propriété est ajoutée à l'objet lui-même. foo={method:function(){...}, prop:...}

El this Le mot-clé représentera et agira différemment selon le contexte. Dans une méthode statique, il représentera la classe elle-même (qui est après tout une instance de Function : class Foo {} est tout à fait équivalent à let Foo = new Function({})

Avec ECMAScript 2015, qui semble bien implémenté aujourd'hui, il est plus clair de voir la différence entre les classes ( statique ), les méthodes et propriétés d'instance et les méthodes et propriétés propres. Vous pouvez donc créer trois méthodes ou propriétés ayant le même nom, mais étant différentes parce qu'ils s'appliquent à des objets différents, le this dans les méthodes, s'appliqueront, respectivement, à l'objet classe lui-même et à l'objet instance, par le prototype ou par le sien.

class Foo {
  constructor(){super();}

  static prop = "I am static" // see 1.
  static method(str) {alert("static method"+str+" :"+this.prop)} // see 1.

  prop="I am of an instance"; // see 2.
  method(str) {alert("instance method"+str+" : "+this.prop)} // see 2.
}

var foo= new Foo();
foo.prop = "I am of own";  // see 3.
foo.func = function(str){alert("own method" + str + this.prop)} // see 3.