开发者社区> 巽秋> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Javascript对象Oject的强制类型转换

简介: 众所周知Javascript作为一种动态类型,弱类型的脚本语言其数据类型在很多时候都会发生类型转换。而这些类型转换往往都是隐式的,这让我们在使用Js的时候会产生许多麻烦。而Js的基础数据类型的转换在此文中不过多阐述,主要记录Js对象数据类型的转换。
+关注继续查看

    众所周知Javascript作为一种动态类型,弱类型的脚本语言其数据类型在很多时候都会发生类型转换。而这些类型转换往往都是隐式的,这让我们在使用Js的时候会产生许多麻烦。而Js的基础数据类型的转换在此文中不过多阐述,主要记录Js对象数据类型的转换。笔者由于比较菜,若有写的不对的地方欢迎大佬在下方留言指正。

1.Number强制转换对象

let a={name:123};
console.log(Number(a));

我们先简单的声明一个对象,并用Number()对其进行强制类型转换

运行结果如下:

那么我们来分析一下对象经过强制类型转换为什么会变成NaN?

在这里就不得不提到Js对象所带有的两个方法,valueOf以及toString。

我们先说一下valueOf这个方法:

JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法;当遇到要预期的原始值的对象时,JavaScript会自动调用它。

默认情况下,valueOf方法由Object后面的每个对象继承。 每个内置的核心对象都会覆盖此方法以返回适当的值。如果对象没有原始值,则valueOf将返回对象本身。

JavaScript的许多内置对象都重写了该函数,以实现更适合自身的功能需要。因此,不同类型对象的valueOf()方法的返回值和返回值类型均可能不同。

以上描述源自MDN对valueOf方法的描述,下方给出不同数据类型valueof的返回值:

注意以上返回值是在你没有覆盖原有valueof的函数的情况下的返回值。

在上表中我们可以清楚的看到,对象返回的值是对象本身,结果如下:

接下来我们再说一下toString方法

一个对象在没有覆盖toString方法的情况下返回值应该为:

那么这两种方式和对象的强制类型转换有什么关系呢?

实际上当Number()强制类型转换Object对象时会进行如下操作:

1.先调用对象的valueOf方法

2.判断该方法的返回值是否为基础数据类型(Number,String,Boolean,Undefined,Null)

3.若返回值为基础数据类型,则转换规则按照相应数据类型的转换规则对其进行转换

4.若返回值不为基础数据类型,则在该返回值的基础上继续调用toString方法

5.判断toString的返回值是否为基础数据类型

6.判断是否为基础数据类型,若是基础数据类型则进行操作3

7.若仍旧不为基础数据类型则报错

下面我们对这些步骤进行验证:

这样看起来似乎解释的通,那么我们看看如果toString的返回值依旧是个对象看一下浏览器是否会报错吧:

果然当toString返回值仍旧为对象时Js报错了

那么我们在验证一下如果第一次调用valueof的返回值就是基础数据类型会发生什么?

所以Number强制转换对象的过程即为如上7步

 2.String强制转换对象

首先依旧先声明一个简单的对象

为了与上面的区分这次我们创建一个对象b{name:b}

从上图我们可以看到强制转换的结果为"[object object]"

同样的下面是解密时间:

事实上String强制转换对象的步骤与Number类似,也分为类似的7个步骤:

1.先调用对象的toString方法

2.判断该方法的返回值是否为基础数据类型(Number,String,Boolean,Undefined,Null)

3.若返回值为基础数据类型,则转换规则按照相应数据类型的转换规则对其进行转换

4.若返回值不为基础数据类型,则在该返回值的基础上继续调用valueOf方法

5.判断valueOf的返回值是否为基础数据类型

6.判断是否为基础数据类型,若是基础数据类型则进行操作3

7.若仍旧不为基础数据类型则报错

String与Number的区别则在于 

Number是先调用valueOf再调用toString 

而String是先调用toString再调用valueof

为了方便下面会以一张图对此进行说明:

所以这就是String转换对象的原理

3.Boolean强制转换对象

我们知道在Js中用于能在判断时为false的只有5个值 

1.undefined

2.null

3.‘’//空字符串

4.0

5.NaN

其他值在判断时都为true,而if判断时是使用了Boolean进行转换的

所以对象经过Boolean转换的值为true

 

 

——————————————————————————————————————————————————————————————————

 

所以一些有趣的面试题的答案也就有了解释:

{}+{}

{}+[]

[]+[]

[]+{}

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
javascript中创建对象的几种方式
前言:          随着web 2.0 的兴起(最具代表性的是Ajax技术了),javascript不再是程序员眼中的“玩具语言”。 编程在不断的简化,可是“用户体验、性能、兼容性、可扩展......”要求却在不断提高,随之涌现出Prototype、jQuery、ExtJs、Dojo等优秀的框架(类库),大大简化了web开发。
582 0
JavaScript OOP 创建对象的7种方式
原文:JavaScript OOP 创建对象的7种方式 我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
583 0
javascript中创建对象的几种方式
原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。
812 0
JavaScript OOP 创建对象的7种方式
我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
653 0
[转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function createCar(sColor) {    // 或者 var car = new Object;    var car = new Object();    // 对象属性    car.
569 0
JavaScript 创建对象的方式
对象直接量 对象直接量是由若干 名/值 对的映射表,名值对中间用冒号分隔,名值对之间用逗号分隔,整个映射表用花括号括起来。属性名可以是JavaScript标识符也可以是字符串直接量(也可以是空字符串),属性的值可以是任意类型的JavaScript表达式,表达式的值即是改属性的值,该值可以是原始值,也可以是对象值。
484 0
JavaScript创建对象的方式!
  JavaScript创建对象的方式!JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点。
515 0
JavaScript 创建对象的七种方式
JavaScript 创建对象的七种方式
0 0
+关注
巽秋
前端萌新
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的对象
立即下载
Javascript中的函数
立即下载
Javascript异步编程
立即下载