浅析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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
javascript测试题练习代码
Oct 10 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 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
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php简单判断文本编码的方法
2015/07/30 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JS常见算法详解
2017/02/28 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
谈谈如何手动释放Python的内存
2016/12/17 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python numpy 按行归一化的实例
2019/01/21 Python
用Python解决x的n次方问题
2019/02/08 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python能做哪些生活有趣的事情
2020/09/09 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
Java编程面试题
2016/04/04 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
应届生找工作求职信
2014/06/24 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python