浅析JavaScript中的隐式类型转换


Posted in Javascript onDecember 05, 2013

如果把通过函数或方法调用,明确的将某种类型转换成另一种类型称为显示转换 ,相反则称为隐式类型转换 。google和维基百科中没有找到“显示类型转换”,“隐式类型转换”的字眼。暂且这么称呼。

一、 运算中存在的隐式类型转换

1, “+”运算符

var a = 11, b = '22'; 
var c = a + b;

这里引擎将会先把a变成字符串"11"再与b进行连接,变成了"1122"。有人会有疑问,为什么不把b变成数字22再进行算术加运算呢,这样的话c就是33了。没有为什么,当运算符“+”两边一个是数字类型,一个是字符串类型时,js引擎规定进行字符串连接运算而非算术加运算。利用运算符“+”这个特性,可以很方便的将Number转换成String。如
var a = 11; 
alert(typeof a); //-->number 
a = a + ''; 
alert(typeof a); //-->string

2,“-”运算符

“-”可以是一元运算符(取负),也可以是二元(减法运算)的。如

var a = 11, b = '5'; 
var c = a - b; 
alert(typeof c); //--> number

这里与上面的“+”相反,会把字符串b隐式的转换成数字5再进行算术减法运算。利用这个特性,可以很方便的将String转换成Number
var a = '11'; 
a = a - ''; 
alert(typeof a);// -->number

二、 语句中存在的隐式类型转换

1,if

var obj = {name:'jack'} 
if(obj){ 
    //do more 
}

这里会把obj隐式的转换成Boolean类型

2,while

var obj = {name:'jack'} 
while(obj){ 
    //do more 
}

同if

3,for in时的类型转换
定义对象字面量时发生从标识符到字符串的隐式转换。

var person = {'name':'jack',"age":20,school:'PKU'}; 
for(var a in person){ 
    alert(a + ": " + typeof a); 
}

这里name,age分别加单/双引号以强调其为String类型,school没有加单/双引号。我们遍历下该对象的属性,查看其类型。发现school也被隐式的转换成了String类型。

数组的索引其实也是字符串类型。这着实令人惊叹,但事实的确如此。如

var ary = [1,3,5,7]; 
for(var a in ary){ 
    alert(a + ": " + typeof a); 
}

三、 alert时存在的隐式类型转换
String.prototype.fn = function(){return this}; 
var a = 'hello'; 
alert(typeof a.fn()); //-->object 
alert(a.fn()); //-->hello

给String原型上添加了个fn方法,该方法返回this,我们知道this可以理解成当前类的实例对象,既然是对象那么typeof a.fn()自然返回是object了。
关键是最后的alert(a.fn()),a.fn()返回的明明是对象,但却隐式的转换成了字符串“hello”显示。

同样的情况发生在数字类型上,如

Number.prototype.fn = function(){return this}; 
var a = 10; 
alert(typeof a.fn());//-->object 
alert(a.fn()); //-->10

a.fn()返回的是对象类型,但在alert(a.fn())时会隐式的将其转换成数字。
Javascript 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 #Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 #Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 #Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 #Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 #Javascript
给事件响应函数传参数的四种方式小结
Dec 05 #Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
详解Node 定时器
2018/02/26 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python中isnumeric()方法的使用简介
2015/05/19 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python如何访问字符串中的值
2020/02/09 Python
python怎么判断模块安装完成
2020/06/19 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python实现图片转字符画的完整代码
2021/02/21 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2014年技术员工作总结
2014/11/18 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
详解python网络进程
2021/06/15 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL