JS 数据类型隐式转换的几个例子

前言

本文将根据3个问题，回顾JavaScript中引用类型的类型转换。

问题一

给出一个对象obj，实现obj==1。

思路：==运算符会隐式转换两边数据，它期望两边出现的数据类型是number，因此会对所有数据进行Number()操作。所以要实现obj==1可以改写valueOf方法。

var obj = {
    valueOf:function(){
        return 1;
    }
}
obj == 1;//true
obj == "1";//true
obj == "2";//false
//还有其他情况

问题二

在问题一的基础上更进一步，实现(obj==1&&obj==2&&obj==3)===true

思路：要实现与运算返回真值，每一步都得返回true。根据上一个问题，可以让valueOf返回一个计数器，每调用一次valueOf就计数加一。

var obj = {
    count:1,
    valueOf:function(){
        return this.count++;
    }
}
obj==1&&obj==2&&obj==3//true

问题三

这是我自己想的一道题目：给定数组array=[1,2,3,4]，实现array[obj] === 2。

思路：我们常用整数代表数组下标对数组项进行索引，但在JavaScript中，数组是对象的一种，其所谓的下标实际上是属性名。而对象的属性名都是字符串，因此[]操作符希望得到的是string类型的数据。所以要改写obj的toString方法。

var obj = {
    valueOf:function(){
        return 1;
    },
    toString:function(){
        return "2";
    }
}
var array = [1,2,3,4];
array[obj];//3

这里同时改写了valueOf方法，与toString方法区分。事实证明[]确实希望得到string类型，并且会对对象调用toString方法，而不是valueOf方法。

总结

纸上得来终觉浅，绝知此事要躬行。也许大家都知道JavaScript会对数据进行隐式类型转换，但是如何转换以及转换成什么类型都是需要经验积累的。当然，本文提到的三个问题都使用了小恶魔==，实际开发中应该尽量避免。