浅析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 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
JS表的模拟方法
Feb 05 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
javascript实现拼图游戏
Jan 29 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
javascript禁用Tab键脚本实例
2013/11/22 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
js实现适配移动端的拖动效果
2020/01/13 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Python re模块介绍
2014/11/30 Python
python开发中module模块用法实例分析
2015/11/12 Python
python numpy 反转 reverse示例
2019/12/04 Python
Pytorch转tflite方式
2020/05/25 Python
python与idea的集成的实现
2020/11/20 Python
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
岗位职责怎么写
2014/03/14 职场文书
演讲主持词
2014/03/18 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
社区工作者演讲稿
2014/05/23 职场文书
企业理念标语
2014/06/09 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
实习协议书
2015/01/27 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
《小小的船》教学反思
2016/02/18 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL