Javascript:类中的绑定(bind)长度

Question

我从一本书中解决了这个练习，但我有问题(如下)。

Write a class Vec that represents a vector in two-dimensional space. It takes x and y parameters (numbers), which it should save to properties of the same name.

Give the Vec prototype two methods, plus and minus, that take another vector as a parameter and return a new vector that has the sum or difference of the two vectors’ (this and the parameter) x and y values.

Add a getter property length to the prototype that computes the length of the vector—that is, the distance of the point (x, y) from the origin (0, 0).

然后练习举例说明结果应该是什么:

// Your code here.

console.log(new Vec(1, 2).plus(new Vec(2, 3)));
// → Vec{x: 3, y: 5}
console.log(new Vec(1, 2).minus(new Vec(2, 3)));
// → Vec{x: -1, y: -1}
console.log(new Vec(3, 4).length);
// → 5

我按如下方式解决了这个练习:

class Vec {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        length = Math.sqrt(this.x * this.x + this.y * this.y);
        }
    plus(v) {
        return { x: this.x + v.x, y: this.y + v.y };
    }
    minus(v) {
        return { x: this.x - v.x, y: this.y - v.y };
    }

}

console.log(new Vec(1, 2).plus(new Vec(2, 3)));
// → Vec{x: 3, y: 5}
console.log(new Vec(1, 2).minus(new Vec(2, 3)));
// → Vec{x: -1, y: -1}
console.log(new Vec(3, 4).length);
// → 5

这可行，但我想改进我的解决方案。如果我更改向量的 x 或 y 值，长度值将是错误的，因为它是在构造函数中计算的。示例:

let vecTest = new Vec(3, 4);

console.log(vecTest.length);
// → 5 (this value is ok)

vecTest.x -= 3;
// the value of x has now changed, but the lenght value has not!

console.log(vecTest.length);
// → 5 (this value is NOT ok)

console.log(Math.sqrt(vecTest.x * vecTest.x + vecTest.y * vecTest.y));
// → 4 (this is what the value should be)

我知道我可以使用一个函数来实现这一点，但是有没有一种方法可以只使用绑定(bind)来实现呢？我试着像这样使用原型(prototype):

Vec.prototype.length = Math.sqrt(this.x * this.x + this.y * this.y);

我在类之外设置了这个值，但它不起作用。 “this”实际上是未定义的。

有什么建议吗？谢谢。

Answer 1

您可以使用 getter对于 .length 属性:

class Vec {
    constructor(x, y) {
        this.x = x || 0;
        this.y = y || 0;
    }
    get length() {
      return Math.sqrt(this.x * this.x + this.y * this.y);
    }
    // ...
}

实例的 .length 属性成为一个动态计算的值。

您可能还希望使 .plus 和 .minus 函数可链接，而不是返回对象文字。

plus(v) {
    this.x += v.x
    this.y += v.y;
    return this;
}
minus(v) {
    this.x -= v.x
    this.y -= v.y;
    return this;
}

现在你可以编写 new Vec(...).plus(...).plus(...).minus(...).length。