「JavaScript 」运算符隐式转换原则

2016-05-13 22:44:00

在使用JavaScript的时候，我们会觉得变量和变量之间的运算非常便利，即使是不同的类型变量之间进行运算的时候也很少抛出错误。但是如果我们对于JavaScript隐式类型转换不十分明晰的话，运算的结果很有可能大大的出乎我们的意外，导致程序的运行不是预期的结果，这样后果就比较严重了。

所以这篇文章详细的讲述了在不进行显式类型转换的情况下使用运算符对两个变量进行运算的时候JavaScript如何进行类型转换。

概念前瞻：

原始类型(Primitive Type): Number, Boolean, String, Null & Undefined。
操作数(Operand): 运算符作用的实体。例如1 + 2，其中1和2就是操作数。

对象转换为原始类型的原则

这一节介绍的是对象的一些重要的显式的类型转换，这对于我们理解之后隐式转换的结果有非常大的帮助。

我们知道，除了null和undefined两个类型，其他类型都会有toString和valueOf方法。不同的类型的这两种方法返回的结果也是不同的。例如：

var number = 1;var boolean = true;var string = "STRING";var array = [1, 3, 5];var object = {a: 1, b: 2, c: 3};var func = function(){ return "FUNCTION"; };number.toString();  // "1"number.valueOf();   // 1boolean.toString(); // "true"boolean.valueOf();  // truestring.toString();  // "STRING"string.valueOf();   // "STRING"array.toString();   // "1, 3, 5"array.valueOf();    // array本身object.toString();   // "[object Object]"object.valueOf();    // object本身func.toString();   // "function (){ return \"FUNCTION\"; }"func.valueOf();    // func本身

// DEMO 1 ↓
当一个对象试图转化为字符串的时候，会按照以下原则：

如果存在toString方法，则调用。如果其返回的是原始类型，则将这个原始类型转化为字符串并返回。
如果没有toString方法或者toString方法返回的不是原始类型，则调用valueOf方法，如果返回的是原始类型，则将其转化为字符串并返回。
如果上述两步都无法完成，则抛出异常。

当一个对象试图转化为数字的时候，与其试图转化为字符串的时候非常类似，只是优先调用valueOf方法：

如果存在valueOf方法，则调用。如果其返回的是原始类型，则将这个原始类型转化为数字并返回。
如果没有valueOf方法或者valueOf方法返回的不是原始类型，则调用toString方法，如果返回的是原始类型，则将其转化为数字并返回。
如果上述两步都无法完成，则抛出异常。

隐式类型转换

、=、-、*、/

这几个运算符无论其左右操作数是何种类型，都会隐式转换成数字来进行比较(DEMO 2)：

var obj = {        toString: function() { return "This is 'toString' Method."; },        valueOf: function() { return 1; }    };    var obj2 = {        toString: function() { return "This is 'toString' Method."; },        valueOf: function() { return 3; }    };    console.log(obj = 9, obj - obj2, "31" / 2);    // true true -2 15.5

==、!=

==和!=两个运算符在大部分的情况下和上面的运算符一样，仅仅是对于Date对象不同。
通常来讲，这两个运算符会将操作数隐式转化为数字，但对于日期对象(Date)，则优先转化为字符串。
看下面一个例子(DEMO 3)：

var date = new Date();    date.toString = function() { return "This is 'toString' Method."; };    date.valueOf = function() { return 1; };    var obj2 = {        toString: function() { return "This is 'toString' Method."; },        valueOf: function() { return 3; }    };    console.log(date == "This is 'toString' Method."); // true    console.log(obj2 == 3); // true

+

加运算符和上面的==和!=基本一致，只是当两个操作数中有一个是字符串的时候有一点儿区别：
当两个操作数中有一个字符串或者两者都是字符串类型的时候，优先将两个操作数隐式转换为字符串，否则转换为数字。

例子(DEMO 4)：

var date = new Date();    date.toString = function() { return "This is 'toString' Method."; };    date.valueOf = function() { return 1; };    var obj2 = {        toString: function() { return "This is 'toString' Method."; },        valueOf: function() { return 3; }    };    console.log(date + obj2); // "This is 'toString' Method.3"    console.log(1 + obj2); // 4    console.log(obj2 + obj2); // 6