在方法调用上创建新的 this

Question

This may be a stupid question, but is it possible to create a new this on a method call of a class? Eg:

const foo = new Foo();
console.log(foo.a(1).b(2));
// for example, outputs 3 (1+2)
// the a method will create a new namespace and attach 1 to it, and b will use that new namespace
console.log(foo.b(2));
// this will result in an error, as there is no new namespace from the a method anymore, so b cannot add to anything?

Maybe this is too hard to understand, sorry.

class Foo {
  a(number) {
    this.a = number;
    return this;
  }
  b(number) {
    return this.a + number;
  }
}

This would be the code where it uses the same this variable - this doesn't fit what I wanted but is what I currently have.

// pseudo
class Foo {
  a(number) {
    const uniqueVariable = number
    return uniqueVariable
    // it'll somehow pass the number from this method to the next method
  }
  // where it can be used with the second method's input
  b(uniqueVariable, number) {
    return uniqueVariable + number
  }
}
foo.a(1).b(2) = 3

This example would obviously cause an error because the return value of a() a number, not something to use a method on again. Please let me know if I need to explain further -- I'm having some struggle explaining it properly.

Answer 1

On my solution, I decided to create two variables to hold the values of each method. ( https://jsbin.com/wozuyefebu/edit?js,console )

The a() method will return a number if the isSingle parameter is set to true . If not, it will return the this object, allowing you to chain the b() method. This is might be a hack but I believe it solves your problem.

I write about Javascript and web development on my blog :) https://changani.me/blog

class Foo {
  constructor() {
    this.aValue = 0;
    this.bValue = 0;
  }

  /**
  * @param {Number} value
  * @param {Boolean} isSingle
  * @returns {Object/Number}
  */
  a(value = 0, isSingle = false) {
    this.aValue = value;
    return isSingle ? this.aValue : this;
  }

  /**
  * @param {Number} value
  * @returns {Number}
  */
  b(value = 0) {
    this.bValue = this.aValue + value;
    return this.bValue;
  }
}

const x = new Foo();

console.log("Should return 3: ", x.a(2).b(1));
console.log("Should return an 2: ", x.a(2, true));
console.log("Should return an instance of the object: ", x.a(2));
console.log("Should return 1: ", x.b(1));
console.log("Should return 0: ", x.a().b());

( https://jsbin.com/wozuyefebu/edit?js,console )

Answer 2

If you want to be able to invoke methods on return value of methods, then, you should return this from those methods. However, you will need an additional method, say value() to actuall get the result of sum.

A possible way is show below.

 class Foo { _a = 0; _b = 0; a(number) { this._a = number; return this; } b(number) { this._b = number; return this; } value() { return this._a + this._b; } } const foo = new Foo(); console.log(foo.a(1).b(2).value()); console.log(foo.b(5).value());

Answer 3

If the intention is that foo.a(1).b(2) changes foo , or if you don't mind changing foo , the other answers here work.

But if you only want foo.a(1).b(2) to return 3 without modifying foo , then you need to return a new Foo .

Now, if you really hell bent on having console.log() print 3 rather than something like Foo { value: 3 } , you can also customize inspect() (given that the question is tagged with node.js ).

All together:

const util = require('util');

class Foo {
    constructor(value) {
        this.value = value || 0;
    }

    add(value) {
        return new Foo(this.value + value);
    }

    a(value) {
        return this.add(value);
    }

    b(value) {
        return this.add(value);
    }

    [util.inspect.custom]() {
        return this.value;
    }
}

const foo = new Foo();
console.log(foo);
console.log(foo.a(2).b(1));
console.log(foo);

Output:

0
3
0