(JS) 如何使用 "new" 运算符和 return 除了 "this" 之外的东西？

Question

我正在制作一个 JavaScript 游戏框架。我有一个名为 Color3 的函数。我正在尝试使用 new 运算符来使用该函数。但是，每次它 return 都是对象而不是我想要 return 的字符串。这是代码：

Color3 = function(r, g, b) {
    this.r = 255;
    this.g = 255;
    this.b = 255;

    if (r != null)
        this.r = r;
    if (g != null)
        this.g = g;
    if (b != null)
        this.b = b;

    return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
};

var myColor = new Color3(0, 255, 0);
console.log(myColor);

预期输出：

"rgb(0, 255, 0)"

实际输出：

Color3 {r: 0, g: 255, b: 0}

有什么方法可以获得预期的输出吗？还是我必须不使用 new 运算符？

Answer 1

如果您 return 不是对象，则默认对象是 returned。您应该 return 一个对象来更改 return 值。尝试 return new String("rgb(" + this.r + ", " + this.g + ", " + this.b + ")")

Answer 2

return 值只有在它是一个对象时才会被 return 编辑。如果你return一个原始值（数字，布尔值，字符串，undefined，null），构造的对象是returned.

你可以可能 return一个String对象：

return new String("rgb(" + this.r + ", " + this.g + ", " + this.b + ")");

这将可能工作，尽管字符串基元和字符串对象之间存在一些差异。

更重要的问题是"why do you want to do this?"你似乎根本不想构造一个对象（你正在丢弃你构造的对象）：一个普通的旧函数就可以正常工作。

Answer 3

Javascript 构造函数的 new 方法创建构造函数指定的对象的 "new" 实例。你需要做这样的事情：

Color3 = function(r, g, b) {
    this.r = 255;
    this.g = 255;
    this.b = 255;

    if (r != null)
        this.r = r;
    if (g!= null)
        this.g = g;
    if (b != null)
        this.b = b;

    this.getColor = function(){
      return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
    }
};
var someColor = Color3.new(200,200,200);
someColor.getColor();

Answer 4

如果你想 return Color3 returns 的字符串，你应该在没有 'new' 运算符的情况下调用 Color3 函数：

Color3 = function(r, g, b) {
    this.r = 255;
    this.g = 255;
    this.b = 255;

    if (r != null)
        this.r = r;
    if (g != null)
        this.g = g;
    if (b != null)
        this.b = b;

    return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
};

var color =  Color3(8,22,3);

//testing the Color3 function
console.log(typeof(color));
console.log(color);

Answer 5

"Is there a way that I can get the expected output? Or do I have to not use the new operator?"

是的，您可以像那样构造对象并仍然获得预期的输出。您可以通过向构造函数的 .prototype 添加一个 .toString() 方法来实现。

Color3 = function(r, g, b) {
    if (r != null)
        this.r = r;
    if (g != null)
        this.g = g;
    if (b != null)
        this.b = b;
};

Color3.prototype.r = 255;
Color3.prototype.g = 255;
Color3.prototype.b = 255;

Color3.prototype.toString = function() {
  return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
}

var c = new Color3(123, 234, 345);
console.log(`Color is: ${c}`);

我还在原型中添加了默认的 RGB 值。

Answer 6

这就是你想要的吗？

Color3 = function(r, g, b) {
    this.r = 255;
    this.g = 255;
    this.b = 255;
    this.rgb;

    if (r != null)
        this.r = r;
    if (g != null)
        this.g = g;
    if (b != null)
        this.b = b;

    this.rgb = this.r + ", " + this.g + ", " + this.b ;

};

var myColor = new Color3(0, 255, 0);
console.log(myColor.rgb);

(JS) 如何使用 "new" 运算符和 return 除了 "this" 之外的东西？

(JS) How to use the "new" operator and return something other than "this"?

javascript

new-operator