浅析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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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 无线电
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
Python连接DB2数据库
2016/08/27 Python
python移位运算的实现
2019/07/15 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
药店促销活动总结
2014/07/10 职场文书
任命通知范文
2015/04/21 职场文书
合同纠纷调解书
2015/05/20 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
JavaScript流程控制(分支)
2021/12/06 Javascript