面试题：JavaScript类型转换 - 自定义对象场景

Question

定义一个JavaScript自定义对象，并重写`valueOf`和`toString`方法。在该对象参与`+`运算符运算时，分析其类型转换过程，并说明如何通过这两个方法控制转换结果以满足不同需求。同时举例说明在实际应用场景中可能遇到的问题及解决方案。

Answer 1

1. 定义JavaScript自定义对象并重写valueOf和toString方法

function CustomObject() {
    this.data = 42;
}

CustomObject.prototype.valueOf = function() {
    return this.data;
};

CustomObject.prototype.toString = function() {
    return 'CustomObject(' + this.data + ')';
};

2. +运算符运算时的类型转换过程

当一个对象参与+运算符运算时，JavaScript会按照以下顺序进行类型转换：

1. 首先调用对象的valueOf方法，如果返回的是原始值（如数字、字符串、布尔值等），则直接使用该值进行运算。
2. 如果valueOf返回的不是原始值，那么会调用toString方法，如果toString返回原始值，则使用该值进行运算。
3. 如果toString也没有返回原始值，那么会抛出一个类型错误。

例如：

let obj = new CustomObject();
let result1 = 10 + obj; // 先调用obj.valueOf()，返回42，结果为10 + 42 = 52
let result2 = 'Hello, ' + obj; // 先调用obj.valueOf()，返回42（非字符串），再调用obj.toString()，返回'CustomObject(42)'，结果为'Hello, CustomObject(42)'

3. 通过这两个方法控制转换结果以满足不同需求

• 需求1：对象作为数字参与运算 可以在valueOf方法中返回期望的数字值。如上述代码中，valueOf返回this.data，使得对象在与数字进行+运算时，能够像数字一样参与计算。
• 需求2：对象作为字符串参与运算 在toString方法中返回期望的字符串格式。比如上述代码中，toString返回特定格式的字符串，使得对象在与字符串进行+运算时，能按照期望的字符串形式拼接。

4. 实际应用场景中可能遇到的问题及解决方案

问题： 在某些场景下，如果valueOf和toString方法返回的值不符合预期，可能会导致运算结果错误。例如：

function AnotherObject() {
    this.data = 'forty - two';
}

AnotherObject.prototype.valueOf = function() {
    return this.data;
};

AnotherObject.prototype.toString = function() {
    return this.data;
};

let anotherObj = new AnotherObject();
let wrongResult1 = 10 + anotherObj; // 期望是数字运算，但由于valueOf返回字符串，这里会进行字符串拼接，结果为'10forty - two'
let wrongResult2 = 'The value is: ' + anotherObj; // 虽然结果符合字符串拼接，但如果期望有特定格式则不符合要求

解决方案：

• 确保valueOf和toString方法返回的值符合实际运算需求。例如，如果对象在与数字运算时应作为数字处理，那么valueOf方法应返回数字类型的值。

function CorrectedObject() {
    this.data = '42';
}

CorrectedObject.prototype.valueOf = function() {
    return parseInt(this.data);
};

CorrectedObject.prototype.toString = function() {
    return 'The number is:'+ this.data;
};

let correctedObj = new CorrectedObject();
let correctResult1 = 10 + correctedObj; // 调用valueOf返回42，结果为10 + 42 = 52
let correctResult2 = 'Info:'+ correctedObj; // 调用toString返回指定格式字符串，结果为'Info: The number is: 42'