详解JavaScript中的4种类型识别方法


Posted in Javascript onSeptember 14, 2015

具体内容如下:

1.typeof

【输出】首字母小写的字符串形式

【功能】

[a]可以识别标准类型(将Null识别为object)

[b]不能识别具体的对象类型(Function除外)

【实例】

console.log(typeof "jerry");//"string"
console.log(typeof 12);//"number"
console.log(typeof true);//"boolean"
console.log(typeof undefined);//"undefined"
console.log(typeof null);//"object"
console.log(typeof {name: "jerry"});//"object"
console.log(typeof function(){});//"function"
console.log(typeof []);//"object"
console.log(typeof new Date);//"object"
console.log(typeof /\d/);//"object"
function Person(){};
console.log(typeof new Person);//"object"

2.Object.prototype.toString

【输出】[object 数据类型]的字符串形式

【功能】

[a]可以识别标准类型及内置对象类型

[b]不能识别自定义类型

【构造方法】

function type(obj){
return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

【实例1】

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]

【实例2】

function type(obj){
  return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
console.log(type(undefined));//"undefined"
console.log(type(null));//"null"
console.log(type({name: "jerry"}));//"object"
console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"object"

3.constructor

【输出】function 数据类型(){[native code]}或者function 自定义类型(){}

【功能】

[a]可以识别标准类型、内置对象类型及自定义类型

[b]不能识别undefined、null,会报错

【构造方法】

function type(obj){
  var temp = obj.constructor.toString();
  return temp.replace(/^function (\w+)\(\).+$/,'$1');
}

【实例1】

console.log(("jerry").constructor);//function String(){[native code]}
console.log((12).constructor);//function Number(){[native code]}
console.log((true).constructor);//function Boolean(){[native code]}
//console.log((undefined).constructor);//报错
//console.log((null).constructor);//报错
console.log(({name: "jerry"}).constructor);//function Object(){[native code]}
console.log((function(){}).constructor);//function Function(){[native code]}
console.log(([]).constructor);//function Array(){[native code]}
console.log((new Date).constructor);//function Date(){[native code]}
console.log((/\d/).constructor);//function RegExp(){[native code]}
function Person(){};
console.log((new Person).constructor);//function Person(){}

【实例2】

function type(obj){
  var temp = obj.constructor.toString().toLowerCase();
  return temp.replace(/^function (\w+)\(\).+$/,'$1');
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
//console.log(type(undefined));//错误
//console.log(type(null));//错误
console.log(type({name: "jerry"}));//"object"
console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"person"

4.instanceof

【输出】true或false

【功能】

[a]可以识别内置对象类型、自定义类型及其父类型

[b]不能识别标准类型,会返回false

[c]不能识别undefined、null,会报错

【实例】

console.log("jerry" instanceof String);//false
console.log(12 instanceof Number);//false
console.log(true instanceof Boolean);//false
//console.log(undefined instanceof Undefined);//报错
//console.log(null instanceof Null);//报错
console.log({name: "jerry"} instanceof Object);//true
console.log(function(){} instanceof Function);//true
console.log([] instanceof Array);//true
console.log(new Date instanceof Date);//true
console.log(/\d/ instanceof RegExp);//true
function Person(){};
console.log(new Person instanceof Person);//true
console.log(new Person instanceof Object);//true

以上内容就是详解JavaScript中的4种类型识别方法,希望大家喜欢。

Javascript 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
JS函数重载的解决方案
May 13 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
js实现二级联动简单实例
Jan 11 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 #Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 #Javascript
JS动态添加iframe的代码
Sep 14 #Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 #Javascript
window.onload使用指南
Sep 13 #Javascript
You might like
PHP开发的一些注意点总结
2010/10/12 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
简述JS控制台的使用
2018/07/15 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python类的用法实例浅析
2015/05/27 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python gdal安装与简单使用
2019/08/01 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python科学计算之narray对象用法
2019/11/25 Python
python使用Geany编辑器配置方法
2020/02/21 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
与UNIX有关的几个名词
2015/09/17 面试题
党章学习思想汇报
2014/01/14 职场文书
网络编辑求职信
2014/04/30 职场文书
中学清明节活动总结
2014/07/04 职场文书
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers