JavaSctipt 语言类型和类型检测

内置类型

JavaScript目前有八种内置类型(包含ES6symbol):

  • null
  • undefined
  • string
  • number
  • boolean
  • object
  • symbol
  • BigInt

检测类型

目前我们常见的数据类型的检测方式有typeofObject.prototype.toStringinstanceofconstructor,它们之间在实际场景的使用中各有优劣,下面我们就来介绍一下它们吧。

typeof

typeof运算符可以用来检测数据的类型,它始终返回值类型的字符串。比较有意思的是,这些类型和它们的字符串值并不是一一对应的:

console.log(typeof undefined)  // 打印 "undefined"
console.log(typeof ' ')        // 打印 "string"  
console.log(typeof 123)        // 打印"number"
console.log(typeof true)       // 打印"boolean"
console.log(typeof {})         // 打印"object"
console.log(typeof Symbol())   // 打印"symbol"
// BigInt
console.log(typeof 9007199254740995n) // 打印"bigint"

以上六种类型均与其字符串值相同,只有null类型不在此列,null的字符串值是object,这也是语言建立初期存在的一个bug。

typeof null === 'object'; // true

还有一种情况,function函数是属于object的一个子类型,但是其字符串值确实function

typeof function () {} === 'function'; // true

以及还有Array也是输入引用类型,返回也是object.

typeof [] === 'object'

Object.prototype.toString

Object.prototype.toString用来返回一个表示该对象的字符串,这也是开发中比较常用的,也比较全面的检测数据类型的方式,下面我们就来看看。

var toString = Object.prototype.toString
console.log(toString.call(null))  // [object Null]
console.log(toString.call(undefined))  // [object Undefined]
console.log(toString.call(''))  // [object String]
console.log(toString.call(123))  // [object Number]
console.log(toString.call(true))  // [object Boolean]
console.log(toString.call([]))  // [object Array]
console.log(toString.call({}))  // [object Object]
console.log(toString.call(function(){}))  // [object Function]
console.log(toString.call(Symbol()))  // [object Symbol]
console.log(toString.call(9007199254740995n))  //[object BigInt]

instanceof

instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

[1] instanceof Array; // true
[1] instanceof Object; // true
"tom" instanceof String; //false
11 instanceof Number; //false

instanceof运算符直接访问的变量的原始值,不会自动建立包装类。因此不能用来判断基本类型值。

instanceof只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。

instanceof假定只有一个全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数

constructor

console.log(("1").constructor === String);
console.log((1).constructor === Number);
console.log((true).constructor === Boolean);
//console.log((null).constructor === Null);
//console.log((undefined).constructor === Undefined);
console.log(([]).constructor === Array);
console.log((function() {}).constructor === Function);
console.log(({}).constructor === Object);
// 打印
都是 true

(这里依然抛开nullundefined)乍一看,constructor似乎完全可以应对基本数据类型和引用数据类型,都能检测出数据类型,事实上并不是如此,来看看为什么:

function Fn(){};

Fn.prototype=new Array();

var f=new Fn();

console.log(f.constructor===Fn);  // false
console.log(f.constructor===Array); // true

我声明了一个构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。
所以数据类型检测中还是Object.prototype.toString表现最优秀

其他

undefined 和 undeclared

变量在声明后并没有初始化值时,默认值为undefined

var a;
typeof a; // 'undefined'

没有在作用域中声明过的变量,是undeclared,但是typeof一个未声明的值却是'undefined',这也是typeof的一个安全机制

var a;
a; // undefined
b; // b is not defined

typeof a; // 'undefined'
typeof b; // 'undefined'

小结

JavaScript有八种内置类型:
nullundefinedbooleanstringnumberobjectsymbolBigInt
通过typeof检测nullarray,返回的是object,typeof检测function返回的是function
了解Object.prototype.toString的使用
已声明未赋值(undefined)和未声明未赋值(undeclared)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容