浅析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 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
JS Attribute属性操作详解
May 19 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
小程序实现左滑删除效果
Jul 25 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
3.从实例开始
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
javascript如何使用bind指定接收者
2014/05/04 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
详解vue axios中文文档
2017/09/12 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
手把手教你python实现SVM算法
2017/12/27 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
C# .NET面试题
2015/11/28 面试题
投标邀请书范文
2014/01/31 职场文书
学校元旦晚会方案
2014/02/19 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
产品质量保证书范本
2015/02/27 职场文书
初中班主任工作总结2015
2015/05/13 职场文书