首页 > 代码库 > javascript是魔术师---自动类型转换

javascript是魔术师---自动类型转换

在讲这个问题之前,有必要提一下js的五种基本类型,网上也有说是两种,六种,七种,八种的。这个不重要,重要的是你理解和你实践的是一致的就可以了。尽信书,不如不读书,所以要多实践。根据typeof返回的结果,常用的五种分类如下:

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的

下面来看一段简单的代码:

var str = ‘hello world‘;

平平无奇的代码,硬是有人提出了问题。这个str明明就是一个基本的字符串类型,怎么在w3c上说是一个字符串对象?

技术分享

有图有真相。我没有要黑w3c的意思。但是我不认为那是什么字符串对象。那么问题来了,为什么不是对象,还可以调用字符串对象上的那些方法呢?

这里就要引出“类型的隐式转换”问题了。在进一步讨论这个问题之前,先来看一个更常见的例子:

var num = ‘3‘;var res = 10 - num;console.log(res); // 7;typeof num; // string;

num是一个字符3,按常理是不可以参与计算的,但是我硬拿它去和10做减法运算,结果居然给出了正常情况下,只有数字3才会有的结果。这很神奇吧?下面我来模拟一下这个自动隐式转换:

var num = ‘3‘;var temp = Number(num);var res = 10 - temp;temp = null;num;

 

可是很多人对此没有任何疑问,觉得理所当然,但是同样的现象发生在字符串上的时候,他们就困惑了。下面我就来好好说道说道这个“隐式自动类型转换”的问题。先看下面的代码:

var str = ‘hello‘;str.charAt(1); //e

当我们在str上调用charAt方法的时候,js会自动在后台进行如下转换:

var temp = new Object(str);

输出 temp.charAt(1);

temp = null;

打铁要趁热,我们再看一个例子:

var str = ‘hello‘;str.name = ‘frog‘; //没有报错console.log(str.name); // undefined

str是一个字符串,却可以像对象一样的添加属性,但是明明设置了属性,却又拿不出来。我们再次用上面的原理去试一下:

var temp = new Object(str);

temp.name = ‘frog‘;

temp = null;

我们对str添加name属性,发生在temp这个中间对象上,所以不会有任何错误,完全合法。但是这个temp毕竟不是自己的,用完就要还。当我们在str上调用刚才设置

的name属性时,又再次触发上述过程:

var temp = new Object(str);

查找 temp.name 为undefined;

temp = null;

所以什么也找不到,但是也不会有错误。这就是为什么可以添加属性,却拿不出来的原因了,因为我们操作的是一个中间状态,系统会视情况为我们进行自动执行这个转换过程。

 

javascript是魔术师---自动类型转换