详解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在页面中添加和除移DOM示例代码
Jun 24 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
javascript断点调试心得分享
Apr 23 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
canvas绘制多边形
Feb 24 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
JavaScript 定时器详情
Nov 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数据库操作方法(MYSQL版)
2011/06/08 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python批量修改图片大小的方法
2018/07/24 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
Ruby如何定义一个类
2012/10/08 面试题
师范生自我鉴定范文
2013/10/05 职场文书
小区门卫工作职责
2013/12/14 职场文书
二年级体育教学反思
2014/01/15 职场文书
演讲比赛策划方案
2014/06/11 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
综治维稳工作承诺书
2014/08/30 职场文书