valueOf() 方法用来把对象转换成原始类型的值(数值、字符串和布尔值)
toString() 方法返回一个表示该对象的字符串。
- 原始类型
Number String Boolean Undefined Null
- String类型转换
- 如果 toString 方法存在并且返回原始类型,返回 toString 的结果。
- 如果 toString 方法不存在或者返回的不是原始类型,调用 valueOf 方法,如果 valueOf 方法存在,并且返回原始类型数据,返回 valueOf 的结果。
- 其他情况,抛出错误。
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类型转换
- 如果 valueOf 存在,且返回原始类型数据,返回 valueOf 的结果。
- 如果 toString 存在,且返回原始类型数据,返回 toString 的结果。
- 其他情况,抛出错误。
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类型转换
什么时候会进行布尔转换呢:
- 布尔比较时
- 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方法
(转自微信公众号:前端大全)
时间: 2024-11-02 23:36:33