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

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();

假设是数组:app

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

上面 + arr ,因为这里是个字符串加操做,后面的 arr 须要转化为一个字符串类型,因此实际上是调用了 + arr.toString() 。函数

可是,对象的toString和valueOf方法能够本身改写:spa

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方法也不返回原始类型的话,就会出现下面的状况:prototype

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类型转换

何时会进行布尔转换呢:code

  1. 布尔比较时对象

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

简单来讲,除了下述 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方法

 (转自微信公众号:前端大全)

相关文章
相关标签/搜索