详解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 相关文章推荐
javascript禁用Tab键脚本实例
Nov 22 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
一个改进的UBB类
2006/10/09 PHP
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python 字典(Dictionary)操作详解
2014/03/11 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
PyQt5实现画布小程序
2020/05/30 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
小学三年级数学教学反思
2014/01/31 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
班主任评语大全
2014/04/26 职场文书
实习单位证明范例
2014/11/17 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript