A brief analysis of the difference between valueOf and toString in Javascript_javascript skills

Foreword

Basically, all JS data types have these two methods, except null. They both solve the problem of JavaScript value calculation and display, and rewriting will increase the optimization of their calls.

Test Analysis

Let’s look at an example first:

Copy code The code is as follows:

var aaa = {
i: 10,
valueOf: function() { return this.i 30; },
toString: function() { return this.valueOf() 10; }
}

alert(aaa > 20); // true
alert( aaa); // 40
alert(aaa); // 50

The reason for this Results because they secretly call the valueOf or toString method.
But how to distinguish which method is called under what circumstances? We can test it through another method.
Since console.log is used, please experiment in FF with firebug installed!

Copy code The code is as follows:

var bbb = {
i: 10,
toString: function() {
console.log('toString');
return this.i;
},
valueOf: function() {
console.log(' valueOf');
return this.i;
}
}

alert(bbb); // 10 toString
alert( bbb); // 10 valueOf
alert('' bbb); // 10 valueOf
alert(String(bbb)); / / 10 toString
alert(Number(bbb)); // 10 valueOf
alert(bbb == '10'); // true valueOf
alert(bbb === '10'); / / false

The result gives the impression that the toString method is called when converting to a string, and the valueOf method is called when converting to a numerical value, but two of them are very discordant. One is alert('' bbb), string concatenation should call the toString method...the other one we can temporarily understand is that the === operator does not perform implicit conversion, so they are not called. To find out the truth, we need more rigorous experiments.

Copy code The code is as follows:

var aa = {
i: 10,
toString: function() {
console.log('toString');
return this.i;
}
}
alert(aa);// 10 toString
alert( aa); // 10 toString
alert('' aa); // 10 toString
alert(String(aa)); // 10 toString
alert(Number(aa)); // 10 toString
alert(aa == '10'); // true toString

Look at valueOf again.

Copy code The code is as follows:

var bb = {
i: 10,
valueOf: function() {
console.log('valueOf');
return this.i;
}
}

alert(bb);// [object Object]
alert( bb); // 10 valueOf
alert('' bb); // 10 valueOf
alert(String(bb)) ; // [object Object]
alert(Number(bb)); // 10 valueOf
alert(bb == '10'); // true valueOf

Found something Different right? ! It is not as unified and regular as toString above.
As for that [object Object], I guess it is inherited from Object. Let’s get rid of it and take a look.

Copy code The code is as follows:

Object.prototype.toString = null;
var cc = {
i: 10,
valueOf: function() {
console.log('valueOf');
return this.i;
}
}

alert(cc); // 10 valueOf
alert( cc); // 10 valueOf
alert('' cc); // 10 valueOf
alert(String(cc) ); // 10 valueOf
alert(Number(cc)); // 10 valueOf
alert(cc == '10'); // true valueOf

Summary: valueOf It is biased towards operation, and toString is biased towards display.
1. When converting objects (for example: alert(a)), the toString method will be called first. If toString is not overridden, the valueOf method will be called. If neither method is overridden, but the toString output of Object is .
2. When forcibly converting to a string type, the toString method will be called first, and when forcibly converting to a number, the valueOf method will be called first.
3. When there is an operation operator, valueOf has a higher priority than toString.