JavaScript 中的类型和判定方法的实用总结

发布于 2021-12-08 12:47:44 字数 3544 浏览 1134 评论 0

1. 语言类型

JavaScript 定义了7种语言类型:Undefined, Null, Boolean, String, Number, Symbol, Object。

围绕 Object,又有很多特殊的类型:Date, String, Number, Boolean, RegExp, Function。

2. 类型判断

undefined

Undefined 类型表示未经赋值的”空值“,该类型只有一个值,可以用全局变量 undefined 来表示。使用 variable === undefined 或者 variable === void 0 可以判断一个值是否为该类型,后者在 ES5 之前更可靠因为那时的全局变量undefined是可以被更改的。

null

Null 类型只有一个值,那就是 null,它是 JavaScript 的关键字,可以直接用 null 来判定值 variable === null。

Boolean, String, Number

这里的数字、字符串、布尔类型是可以是原始类型,也可以它们的包装对象。简单通过如下代码即可进行类型判定:

typeof num === 'number'
typeof str === 'string'
typeof bol === 'boolean'

比较特殊的一点是 typeof null 得到的是 object,可以把它当做一个 非对象 类型的对象。

Symbol

同样可以直接使用 typeof 判断 Symbol 类型

typeof sy === 'symbol'

Object

JavaScript 是面向对象的编程语言,在开发过程中会用到大量的对象,仅仅使用 typeOf 显然无助于了解更多跟对象相关的信息

我们可以使用 Object.prototype.toString.apply(variable) 会返回类似于 [object Object] 的结构,第二个 Object 会随着构造函数的不同而不同。

因此我们就可以使用如下代码来判断具体的类型:

Object.prototype.toString.apply(o).slice(8, -1) === 'Object'
Object.prototype.toString.apply(n).slice(8, -1) === 'Number'
Object.prototype.toString.apply(s).slice(8, -1) === 'String'
Object.prototype.toString.apply(b).slice(8, -1) === 'Boolean'
Object.prototype.toString.apply(d).slice(8, -1) === 'Date'
Object.prototype.toString.apply(r).slice(8, -1) === 'RegExp'
Object.prototype.toString.apply(r).slice(8, -1) === 'Function'
Object.prototype.toString.apply(c).slice(8, -1) === 'CustomClass'

3. 其他相关方法

instanceOf 运算符

该运算符期望做操作数是对象,有操作符是表示对象的类, 因为所有的对象都是 Object 的实例,所以判断一个对象是否是一个类的实例的时候,所有对该类的 父类 的检测也能通过。

var d = new Date();
d instanceof Date; //true
d instanceof Object; //true

为什么不能直接使用 instanceOf 作为类型检测?原因是 Web 浏览器可能有多个窗口或者 frame 存在,每个窗口都有自己的 JavaScript 环境,都有自己的全局对象,因此一个窗体中的对象将不是另外窗体的的构造函数的实例。

isPrototypeOf vs constructor.prototype vs constructor

JavaScript 希望将原型对象作为类的唯一标志,例如,如下的 Cat 的实例可以通过 isPrototypeOf 的方法来判定它是否是属于 Cat 类:

function Cat(){}
var cat = new Cat();
Cat.prototype.isPrototypeOf(cat);

创建对象的三种方法中,通过 new 和 Object.create 创建的过程中如果指定了 prototype,通过 constructor.prototype 来判定对象所属类是不可靠的:

function F(){};
F.prototype = {y: 1};
var o2 = new F();
o2.constructor.prototype === F.prototype; // false 
o2.constructor.prototype === Object.prototype; // true 
F.prototype.isPrototypeOf(o2); // true

var p = {x:1};
var o3 = Object.create(p);
o3.constructor.prototype === p; // false
o3.constructor.prototype === Object.prototype; // true 
p.isPrototypeOf(o3); // true

初始化对象的 constructor 则不能作为类的标志,因为两个不同个构造函数的 prototype 属性可能指向同一个原型对象。但因为构造函数的 外在表现,它的名字常被用作类名,而且 instanceOf 的表现强化了 构造函数是类的共有标志 的印象。

4. 使用总结

判定逻辑
nullval === null
undefiendval === undefined
booleantypeof val === 'boolean'
stringtypeof val === 'string'
numbertypeof val === 'number'
objectObject.prototype.toString.apply(val).slice(8, -1) === 'Object'
dateObject.prototype.toString.apply(val).slice(8, -1) === 'Date'
arrayObject.prototype.toString.apply(val).slice(8, -1) === 'Array'

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

毁梦

暂无简介

0 文章
0 评论
586 人气
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文