平武建站

JavaScript之类型检测的案例-创新互联

这篇文章主要介绍了JavaScript之类型检测的案例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联作为成都网站建设公司，专注网站建设公司、网站设计，有关成都定制网页设计方案、改版、费用等问题，行业涉及除甲醛等多个领域，已为上千家企业服务，得到了客户的尊重与认可。

一、typeof

typeof：操作符返回一个字符串，表示未经计算的操作数的类型。

我们都知道，在 ES6 前，JavaScript 共六种数据类型，分别是：

  1. Undefined

  2. Null

  3. Boolean

  4. Number

  5. String

  6. Object

然而当我们使用 typeof 对这些数据类型的值进行操作的时候，返回的结果却不是一一对应，分别是：

  1. Undefined

  2. object – ***

  3. Boolean

  4. Number

  5. String

  6. Object

有一些意外，typeof null => 'object' 且typeof function(){} => 'function'

所以在大多数情况下我们可以使用typeof来检测基本数据类型，但是，检测得到的Object后，却无法区分是哪一种Object：

typeof [] === 'object'; //truetypeof {} === 'object'; //truetypeof null === 'object'; //true

总结

在检测Js的原始类型时，除了typeof null返回object之外，其他的都返回对应类型名的小写字母。

二、instanceof

我们判断对象类型的时候，可以使用instanceof：

如果对原型及原型链不太熟悉的同学不妨看看这篇文章从原型到原型链

定义

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

实例

const arr = [];const obj = {};console.log(arr instanceof Array);   // trueconsole.log(arr instanceof Object);  // trueconsole.log(obj instanceof Array);   // falseconsole.log(obj instanceof Object);  // true

注意instanceof是能匹配类型的父类的，所以arr instanceof Array和arr instanceof Object都是true，因为Object是Array的父类。


满足class extends和原型链规则的父子类关系的对象都能被匹配：

class

class Base {}class Current extends Base {}const obj = new Current();console.log(obj instanceof Current); // trueconsole.log(obj instanceof Base); // true

原型链

function Foo() {}function Bar() {}Bar.prototype = new Foo();const obj = new Bar();console.log(obj instanceof Bar); // trueconsole.log(obj instanceof Foo); // true

注意如果我们修改obj的原型链能改变instanceof的结果：


function Other() {}obj.__proto__ = new Other();console.log(obj instanceof Other); // trueconsole.log(obj instanceof Foo); // false

总结

instanceof借助了原型链来判断的实际上，只要一个类型Type的prototype在一个对象obj的原型链上，那么obj instanceof Type就是true，否则就是false。

三、constructor

有时候我们不希望匹配父类型，只希望匹配当前类型，那么我们可以用constructor来判断：

如果对原型及原型链不太熟悉的同学不妨看看这篇文章从原型到原型链

定义

返回创建实例对象的Object 构造函数的引用。注意，此属性的值是对函数本身的引用，而不是一个包含函数名称的字符串。

实例

const arr = [];console.log(arr.constructor === Array); // trueconsole.log(arr.constructor === Object); // false

对象的constructor会返回它的类型，而类型在定义的时候，会创建一个name只读属性，值为类型的名字。


class Foo {}console.log(Foo.name); // Fooconst foo = new Foo();console.log(foo.constructor === Foo); // trueconsole.log(foo.constructor.name === 'Foo'); // true

疑问

  • constructor.name 一定就是正确的吗？

  • 我们可以修改它吗？

四、stringTag是什么？

4.1 stringTag——类型标签

如果你看过一些库的早期实现，你会发现使用Object.prototype.toString来做类型判断的方式，他们会数据类型的字符串标志，被称作stringTag；

4.2 Object.prototype.toString

定义

toString()方法返回一个表示该对象的字符串。

每个对象都有一个toString() 方法，当该对象被表示为一个文本值时，默认情况下，toString() 方法被每个 Object 对象继承。

如果此方法在自定义对象中未被覆盖，toString() 返回 “[object type]”，其中 type 是对象的类型。以下代码说明了这一点：

实例

比如这是requirejs里面的代码片段。

var ostring = Object.prototype.toString;function isArray(it) {
  return ostring.call(it) === '[object Array]';}

toString时都做了什么？

这里直接将冴羽大大的总结搬了过来:

When the toString method is called, the following steps are taken:

  1. If the this value is undefined, return “[object Undefined]”.

  2. If the this value is null, return “[object Null]”.

  3. Let O be the result of calling ToObject passing the this value as the argument.

  4. Let class be the value of the [[Class]] internal property of O.

  5. Return the String value that is the result of concatenating the three Strings "[object ", class, and “]”.

当 toString 方法被调用的时候，下面的步骤会被执行：

  1. 如果 this 值是 undefined，就返回 [object Undefined]

  2. 如果 this 的值是 null，就返回 [object Null]

  3. 让 O 成为 ToObject(this) 的结果

  4. 让 class 成为 O 的内部属性 [[Class]] 的值

  5. 最后返回由 "[object " 和 class 和 “]” 三个部分组成的字符串

注意

有几点我们需要注意：

  • toString无法区分原始类型及其构造对象；

    • 我们认为Number、Boolean这种类型在被构造器构造出来后的类型应该是对象；

    • 但toString都会返回[object number]等原始类型；

  • toString方法是可以自定义的；

五、实现几个数据检测的方法

好了看了几款常用的类型判断方法后，我们可不可以实现自己的类型判断工具？就利用上述提到的一个或多个方法。我们自己动手丰衣足食～

5.1 isObject

注意，我们认为null不是一个对象，它就是null～

function isObject(value) {
    const type = typeof value;
    return value != null && (type === 'object' || type === 'function');}
5.2 isNull
function isNull(value) {
    return value === null;}
5.3 isFunction
function isFunction(value) {
    return typeof value === 'function';}
5.4 isArray
var isArray = Array.isArray || function( value ) {
    return type(value) === "array";}
5.5 stringTag
const toString = Object.prototype.toString;function getTag(value) {
    // if (value === null) return '[object Null]';
    // if (value == null) return '[object Undefined]'
    if (value == null) {
        return value === undefined ? '[object Undefined]' : '[object Null]'
    }
    return toString.call(value)}

感谢你能够认真阅读完这篇文章，希望小编分享的“JavaScript之类型检测的案例”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!


当前文章：JavaScript之类型检测的案例-创新互联
新闻来源：http://pwwzsj.com/article/egipo.html

其他资讯