Object.prototype.valueOf()和Object.prototype.toString()

Posted 2020-09-06

valueOf() 方法用来把对象转换成原始类型的值（数值、字符串和布尔值）

toString() 方法返回一个表示该对象的字符串。

• 原始类型

Number
String
Boolean
Undefined
Null

• String类型转换

1. 如果 toString 方法存在并且返回原始类型，返回 toString 的结果。
2. 如果 toString 方法不存在或者返回的不是原始类型，调用 valueOf 方法，如果 valueOf 方法存在，并且返回原始类型数据，返回 valueOf 的结果。
3. 其他情况，抛出错误。

var obj = {name: ‘Coco‘};
var str = ‘123‘ + obj;
console.log(str);  // 123[object Object]

上面的代码等价于：

var obj = {name: ‘Coco‘};
var str = ‘123‘ + obj.toString();

假设是数组：

var arr = [1, 2];
var str = ‘123‘ + arr;
console.log(str); // 1231,2

上面 + arr ，由于这里是个字符串加操作，后面的 arr 需要转化为一个字符串类型，所以其实是调用了 + arr.toString() 。

但是，对象的toString和valueOf方法可以自己改写：

var obj = {
    toString: function() {
        console.log(‘调用了 obj.toString‘);
        return {};
    },
    valueOf: function() {
        console.log(‘调用了 obj.valueOf‘)
        return ‘110‘;
    }
}
 
alert(obj);
// 调用了 obj.toString（toString方法没有返回原始类型，接着调用valueOf方法）
// 调用了 obj.valueOf
// 110

如果valueOf方法也不返回原始类型的话，就会出现下面的情况：

var obj = {
    toString: function() {
        console.log(‘调用了 obj.toString‘);
        return {};
    },
    valueOf: function() {
        console.log(‘调用了 obj.valueOf‘)
        return {};
    }
}
 
alert(obj);
// 调用了 obj.toString
// 调用了 obj.valueOf
// Uncaught TypeError: Cannot convert object to primitive value

• Number类型转换

1. 如果 valueOf 存在，且返回原始类型数据，返回 valueOf 的结果。
2. 如果 toString 存在，且返回原始类型数据，返回 toString 的结果。
3. 其他情况，抛出错误。

var obj = {
    valueOf: function() {
        console.log(‘调用 valueOf‘);
        return 5;
    }
}
 
console.log(obj + 1);
// 调用 valueOf
// 6

var obj = {
    valueOf: function() {
        console.log(‘调用 valueOf‘);
        return {};
    },
    toString: function() {
        console.log(‘调用 toString‘);
        return 10;
    }
}
 
console.log(obj + 1);
// 调用 valueOf
// 调用 toString
// 11

var obj = {
    valueOf: function() {
        console.log(‘调用 valueOf‘);
        return {};
    },
    toString: function() {
        console.log(‘调用 toString‘);
        return {};
    }
}
 
console.log(obj + 1);
// 调用 valueOf
// 调用 toString
// Uncaught TypeError: Cannot convert object to primitive value

• Boolean类型转换

什么时候会进行布尔转换呢：

1. 布尔比较时

2. if(obj) , while(obj) 等判断时

简单来说，除了下述 6 个值转换结果为 false，其他全部为 true：

undefined
null
-0
0或+0
NaN
”（空字符串）

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean(‘‘) // false

• Function转换

function test() {
    var a = 1;
    console.log(1);
}
test; // 这里其实自行调用了函数的valueOf方法
function test() {
    var a = 1;
    console.log(1);
}

test.valueOf = function() {
    console.log(‘调用 valueOf 方法‘);
    return 2;
}
 
test;
// 输出如下：
// 调用 valueOf 方法
// 2

test.valueOf = function() {
    console.log(‘调用 valueOf 方法‘);
    return {};
}
 
test.toString= function() {
    console.log(‘调用 toString 方法‘);
    return 3;
}
 
test;
// 输出如下：
// 调用 valueOf 方法（不是返回的原始类型，继续寻找toString方法进行调用）
// 调用 toString 方法
// 3

function add () {
    console.log(‘进入add‘);
    var args = Array.prototype.slice.call(arguments);
 
    var fn = function () {
        var arg_fn = Array.prototype.slice.call(arguments);
        console.log(‘调用fn‘);
        return add.apply(null, args.concat(arg_fn));
    }
 
    // 此处的valueOf方法也能换成toString方法
    fn.valueOf = function () {
        console.log(‘调用valueOf‘);
        return args.reduce(function(a, b) {
            return a + b;
        })
    }
 
    return fn;
}

add(1)(2)(3);
// 输出如下：
// 进入add
// 调用fn
// 进入add
// 调用fn
// 进入add
// 调用valueOf
// 6
// 前面都是合并参数，到最后返回fn函数，此时才调用fn.valueOf方法

 （转自微信公众号：前端大全）