详解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 相关文章推荐
js 控制下拉菜单刷新的方法
Mar 03 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
微信小程序实现简单的select下拉框
Nov 23 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
农历与西历对照
2006/09/06 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
python爬取微信公众号文章
2018/08/31 Python
python事件驱动event实现详解
2018/11/21 Python
详解爬虫被封的问题
2019/04/23 Python
django中forms组件的使用与注意
2019/07/08 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
应届生自荐信范文
2014/02/21 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
祝酒词范文
2015/08/12 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js