JavaScript中使用new运算符时，如何返回非this值？（附Color3函数案例）

当你用new关键字调用函数时，JavaScript的构造函数机制会自动创建一个新对象（这个对象会绑定到函数内部的this）。如果构造函数返回的是原始值（比如字符串、数字、布尔这类非对象类型），这个返回值会被直接忽略，最终返回的是new操作符创建的那个实例对象——这就是为什么你每次得到的都是对象，而非预期的字符串。

根据你的需求，有两种实用的处理方式：

方式1：作为普通函数调用（不用new） #

如果你不需要用new来调用这个函数，直接把它当作工具函数使用即可，此时return的字符串会正常生效：

Color3 = function(r, g, b) {
  // 初始化默认的RGB值
  let rVal = 255, gVal = 255, bVal = 255;
  // 替换传入的有效值
  if (r != null) rVal = r;
  if (g != null) gVal = g;
  if (b != null) bVal = b;
  // 返回格式化后的rgb字符串
  return `rgb(${rVal}, ${gVal}, ${bVal})`;
};

// 直接调用函数，无需new
var myColor = Color3(0, 255, 0);
console.log(myColor); // 输出 "rgb(0, 255, 0)"

方式2：保留new调用，添加toString方法 #

如果你希望保留new调用的方式（比如需要维护实例的RGB状态），可以给构造函数的原型添加toString方法。这样当你需要将实例转换为字符串时，调用toString()或者在自动隐式转换的场景下（比如设置DOM样式），就能得到想要的rgb格式字符串：

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;
};

// 给Color3的原型添加toString方法
Color3.prototype.toString = function() {
  return `rgb(${this.r}, ${this.g}, ${this.b})`;
};

var myColor = new Color3(0, 255, 0);
console.log(myColor.toString()); // 输出 "rgb(0, 255, 0)"
// 隐式转换场景会自动调用toString，比如设置样式
document.body.style.backgroundColor = myColor; // 页面背景会变为绿色

要记住：只有当构造函数返回的是对象类型（比如普通对象、数组、函数等）时，new操作符才会用这个返回值替换默认创建的实例。返回原始值的话，都会被忽略，最终还是返回默认的实例对象。

内容的提问来源于stack exchange，提问作者Tunacan