Javascript: surcharge des opérateurs

Je travaille avec JavaScript depuis quelques jours maintenant et je suis arrivé à un point où je veux surcharger les opérateurs pour mes objets définis.

Après un passage sur Google à la recherche de cela, il semble que vous ne puissiez pas le faire officiellement, mais il y a quelques personnes qui revendiquent une manière de longue haleine d'effectuer cette action.

En gros, j'ai créé une classe Vector2 et je souhaite pouvoir effectuer les opérations suivantes:

var x = new Vector2(10,10);
var y = new Vector2(10,10);

x += y; //This does not result in x being a vector with 20,20 as its x & y values.

Au lieu de cela, je dois faire ceci:

var x = new Vector2(10,10);
var y = new Vector2(10,10);

x = x.add(y); //This results in x being a vector with 20,20 as its x & y values. 

Existe-t-il une approche que je peux adopter pour surcharger les opérateurs dans ma classe Vector2? Comme cela semble tout simplement moche.

Comme vous l'avez constaté, JavaScript ne prend pas en charge la surcharge d'opérateurs. Le plus proche que vous pouvez venir est d'implémenter toString(qui sera appelé lorsque l'instance doit être forcée à être une chaîne) et valueOf(qui sera appelé pour la forcer à un nombre, par exemple lors de l'utilisation +pour l'addition, ou dans de nombreux cas lorsque l'utiliser pour la concaténation car +essaie de faire une addition avant la concaténation), ce qui est assez limité. Ni l'un ni l'autre ne vous permet de créer un Vector2objet en conséquence.

Pour les personnes qui viennent à cette question et qui veulent une chaîne ou un nombre comme résultat (au lieu d'un Vector2), cependant, voici des exemples de valueOfet toString. Ces exemples ne montrent pas la surcharge des opérateurs, profitant simplement de la gestion intégrée de JavaScript lors de la conversion en primitives:

valueOf

Cet exemple double la valeur de la valpropriété d'un objet en réponse à une contrainte sur une primitive, par exemple via +:

function Thing(val) {
    this.val = val;
}
Thing.prototype.valueOf = function() {
    // Here I'm just doubling it; you'd actually do your longAdd thing
    return this.val * 2;
};

var a = new Thing(1);
var b = new Thing(2);
console.log(a + b); // 6 (1 * 2 + 2 * 2)

Ou avec ES2015 class:

class Thing {
    constructor(val) {
      this.val = val;
    }
    valueOf() {
      return this.val * 2;
    }
}

const a = new Thing(1);
const b = new Thing(2);
console.log(a + b); // 6 (1 * 2 + 2 * 2)

Ou juste avec des objets, pas de constructeurs:

var thingPrototype = {
    valueOf: function() {
      return this.val * 2;
    }
};

var a = Object.create(thingPrototype);
a.val = 1;
var b = Object.create(thingPrototype);
b.val = 2;
console.log(a + b); // 6 (1 * 2 + 2 * 2)

toString

Cet exemple convertit la valeur de la valpropriété d'un objet en majuscules en réponse à une contrainte sur une primitive, par exemple via +:

function Thing(val) {
    this.val = val;
}
Thing.prototype.toString = function() {
    return this.val.toUpperCase();
};

var a = new Thing("a");
var b = new Thing("b");
console.log(a + b); // AB

Ou avec ES2015 class:

class Thing {
    constructor(val) {
      this.val = val;
    }
    toString() {
      return this.val.toUpperCase();
    }
}

const a = new Thing("a");
const b = new Thing("b");
console.log(a + b); // AB

Ou juste avec des objets, pas de constructeurs:

var thingPrototype = {
    toString: function() {
      return this.val.toUpperCase();
    }
};

var a = Object.create(thingPrototype);
a.val = "a";
var b = Object.create(thingPrototype);
b.val = "b";
console.log(a + b); // AB

Comme TJ l'a dit, vous ne pouvez pas surcharger les opérateurs en JavaScript. Cependant, vous pouvez profiter de la valueOffonction pour écrire un hack qui semble mieux que d'utiliser des fonctions comme à addchaque fois, mais qui impose des contraintes sur le vecteur que les x et y sont compris entre 0 et MAX_VALUE. Voici le code:

var MAX_VALUE = 1000000;

var Vector = function(a, b) {
    var self = this;
    //initialize the vector based on parameters
    if (typeof(b) == "undefined") {
        //if the b value is not passed in, assume a is the hash of a vector
        self.y = a % MAX_VALUE;
        self.x = (a - self.y) / MAX_VALUE;
    } else {
        //if b value is passed in, assume the x and the y coordinates are the constructors
        self.x = a;
        self.y = b;
    }

    //return a hash of the vector
    this.valueOf = function() {
        return self.x * MAX_VALUE + self.y;
    };
};

var V = function(a, b) {
    return new Vector(a, b);
};

Ensuite, vous pouvez écrire des équations comme celle-ci:

var a = V(1, 2);            //a -> [1, 2]
var b = V(2, 4);            //b -> [2, 4]
var c = V((2 * a + b) / 2); //c -> [2, 4]

FYI paper.js résout ce problème en créant PaperScript, un javascript autonome et à portée avec une surcharge d'opérateurs de vecteurs, qu'il traite ensuite en javascript.

Mais les fichiers paperscript doivent être spécifiquement spécifiés et traités comme tels.

En fait, il existe une variante de JavaScript qui prend en charge la surcharge des opérateurs. ExtendScript, le langage de script utilisé par les applications Adobe telles que Photoshop et Illustrator, a une surcharge d'opérateurs. Dans celui-ci, vous pouvez écrire:

Vector2.prototype["+"] = function( b )
{
  return new Vector2( this.x + b.x, this.y + b.y );
}

var a = new Vector2(1,1);
var b = new Vector2(2,2);
var c = a + b;

Ceci est décrit plus en détail dans le "Guide des outils JavaScript d'Adobe Extendscript" ( lien actuel ici ). La syntaxe était apparemment basée sur un projet (maintenant abandonné depuis longtemps) de la norme ECMAScript.

Il est possible de faire des mathématiques vectorielles avec deux nombres regroupés en un seul. Permettez-moi d'abord de montrer un exemple avant d'expliquer comment cela fonctionne:

let a = vec_pack([2,4]);
let b = vec_pack([1,2]);

let c = a+b; // Vector addition
let d = c-b; // Vector subtraction
let e = d*2; // Scalar multiplication
let f = e/2; // Scalar division

console.log(vec_unpack(c)); // [3, 6]
console.log(vec_unpack(d)); // [2, 4]
console.log(vec_unpack(e)); // [4, 8]
console.log(vec_unpack(f)); // [2, 4]

if(a === f) console.log("Equality works");
if(a > b) console.log("Y value takes priority");

J'utilise le fait que si vous décalez un peu deux nombres X fois, puis ajoutez ou soustrayez-les avant de les recaler, vous obtiendrez le même résultat que si vous ne les aviez pas décalés au départ. De même, la multiplication et la division scalaires fonctionnent symétriquement pour les valeurs décalées.

Un nombre JavaScript a 52 bits de précision entière (flottants de 64 bits), donc je vais emballer un nombre dans les 26 bits disponibles les plus élevés, et un dans le plus bas. Le code est un peu plus compliqué car je voulais prendre en charge les nombres signés.

function vec_pack(vec){
    return vec[1] * 67108864 + (vec[0] < 0 ? 33554432 | vec[0] : vec[0]);
}

function vec_unpack(number){
    switch(((number & 33554432) !== 0) * 1 + (number < 0) * 2){
        case(0):
            return [(number % 33554432),Math.trunc(number / 67108864)];
        break;
        case(1):
            return [(number % 33554432)-33554432,Math.trunc(number / 67108864)+1];
        break;
        case(2):
            return [(((number+33554432) % 33554432) + 33554432) % 33554432,Math.round(number / 67108864)];
        break;
        case(3):
            return [(number % 33554432),Math.trunc(number / 67108864)];
        break;
    }
}

Le seul inconvénient que je peux voir avec cela est que le x et le y doivent être compris entre + -33 millions, car ils doivent tenir dans 26 bits chacun.

Bien que ce ne soit pas une réponse exacte à la question, il est possible d'implémenter certaines des méthodes python __magic__ en utilisant les symboles ES6

Une [Symbol.toPrimitive]()méthode ne vous permet pas d'impliquer un appel Vector.add(), mais vous permettra d'utiliser une syntaxe telle que Decimal() + int.

class AnswerToLifeAndUniverseAndEverything {
    [Symbol.toPrimitive](hint) {
        if (hint === 'string') {
            return 'Like, 42, man';
        } else if (hint === 'number') {
            return 42;
        } else {
            // when pushed, most classes (except Date)
            // default to returning a number primitive
            return 42;
        }
    }
}

• https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/

Intéressant est également la surcharge d'opérateur de bibliothèque expérimentale js . Il ne surcharge que dans un contexte défini (fonction de rappel).

Nous pouvons utiliser des Hooks de type React pour évaluer la fonction de flèche avec différentes valeurs de valueOfméthode à chaque itération.

const a = Vector2(1, 2) // [1, 2]
const b = Vector2(2, 4) // [2, 4]    
const c = Vector2(() => (2 * a + b) / 2) // [2, 4]
// There arrow function will iterate twice
// 1 iteration: method valueOf return X component
// 2 iteration: method valueOf return Y component

const Vector2 = (function() {
  let index = -1
  return function(x, y) {
    if (typeof x === 'function') {
      const calc = x
      index = 0, x = calc()
      index = 1, y = calc()
      index = -1
    }
    return Object.assign([x, y], {
      valueOf() {
        return index == -1 ? this.toString() : this[index]
      },
      toString() {
        return `[${this[0]}, ${this[1]}]`
      },
      len() {
        return Math.sqrt(this[0] ** 2 + this[1] ** 2)
      }
    })
  }
})()

const a = Vector2(1, 2)
const b = Vector2(2, 4)

console.log('a = ' + a) // a = [1, 2]
console.log(`b = ${b}`) // b = [2, 4]

const c = Vector2(() => (2 * a + b) / 2) // [2, 4]
a[0] = 12
const d = Vector2(() => (2 * a + b) / 2) // [13, 4]
const normalized = Vector2(() => d / d.len()) // [0.955..., 0.294...]

console.log(c, d, normalized)

Library @ js-basics / vector utilise la même idée pour Vector3.