码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-03-27 18:21:14      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:没有   reduce   array   pre   type   obj   cat   比较   判断   

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方法

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

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

标签:没有   reduce   array   pre   type   obj   cat   比较   判断   

原文地址:http://www.cnblogs.com/crazy-man/p/6628050.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!