浅析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 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
浅析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
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
Python程序暂停的正常处理方法
2019/11/07 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
电子技术专业中专生的自我评价
2013/12/17 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
个人承诺书
2014/03/26 职场文书
企业宗旨标语
2014/06/10 职场文书
三八节标语
2014/06/27 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
MyBatis 动态SQL全面详解
2021/10/05 MySQL
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers