判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解


Posted in Javascript onNovember 07, 2013

1、typeof(param) 返回param的类型(string)

这种方法是JS中的定义的全局方法,也是编译者们最常用的方法,优点就是使用简单、好记,缺点是不能很好的判断object、null、array、regexp和自定义对象。

示例代码:

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');
console.log(typeof(str));
console.log(typeof(arr));
console.log(typeof(num));
console.log(typeof(bool));
console.log(typeof(obj));
console.log(typeof(nullObj));
console.log(typeof(undefinedObj));
console.log(typeof(reg));
console.log(typeof(fn));
console.log(typeof(user));

结果为:
string
object
number
boolean
object
object
undefined
object
function
object

2、Object.prototype.toString().call(param) 返回param的类型(string,格式是[object class])

这个方法能支持绝大多数类型的判断,jquery封装的类型判断就用的这个方法。可能有些人看起来有点迷茫,我来给大家分解一下。

1)call(param)函数

a.fun().call(b)的意思在js中是指,让对象b来代替a,然后执行a的fun函数,写个例子:

function Class1() 
{ 
    this.name = "class1"; 
    this.showNam = function() 
    { 
        alert(this.name); 
    } 
} 
function Class2() 
{ 
    this.name = "class2"; 
} 
var c1 = new Class1(); 
var c2 = new Class2(); 
c1.showNam.call(c2);

运行结果,输出的为class2,而不是class1,这就相当于是方法继承。
所以,Object.prototype.toString().call(param)的意思其实就是,param.prototype.toString(),那么我们为什么不直接写param.prototype.toString(),而是用call()绕一下呢,下面请看2来了解。

2)Object.prototype.toString()

Object是个什么东东呢?,Script56.chm(就是M$官方教程)上说:Obect提供所有 JScript对象通用的功能,其实Object就是所有js对象的祖先,是一个概念,js中的所有对象就是Object的实例,然后不同的对象重写自己独立的方法。而prototype,大家就没必要追究太深了,它就是返回一个原型的引用,然可以可以动态的给原型添加方法和属性
一个小例子

function class(){
  this.name = "class";
  this.showName = function(){
    alert(this.name);
  }
}
var obj = new class();
obj.showName();
class.prototype.showNameContact = function(){
  alert("prototype test"+this.name);
}
obj.showNameContact();

那么就会分别输出 class和prototype test class,本来构造函数class() 里是没有定义showNameContact函数的,而通过prototype我们就可以给对象原型动态添加函数,new的示例中自然就会有了。所以Object.prototype.toString()的意思就是执行Object这个祖先中的toString方法。

那么toString()是干嘛的呢?很多js手册中对toString()函数是这样定义的:
toString() 方法可把一个逻辑值转换为字符串,并返回结果,语法为:booleanObject.toString()。刚才我说了,js中的对象都是继承的Object,这些对象都自定义的有函数或者重构了Object的部分函数,而且它们都对toString()函数进行了重写。所以我们不能想1中直接写param.prototype.toString()这样就执行的是param自己重写后的toString()函数了。

好了,到关键的时刻了,toString()到底是干嘛的呢,有什么作用呢?

在ES3中,Object.prototype.toString方法的规范如下:

Object.prototype.toString()

在toString方法被调用时,会执行下面的操作步骤:

1. 获取this对象的[[Class]]属性的值.

2. 计算出三个字符串"[object ", 第一步的操作结果Result(1), 以及 "]"连接后的新字符串.

3. 返回第二步的操作结果Result(2).

在ES3中,规范文档并没有总结出[[class]]内部属性一共有几种,不过我们可以自己统计一下,原生对象的[[class]]内部属性的值一共有10种.分别是:"Array", "Boolean", "Date", "Error", "Function", "Math", "Number", "Object","RegExp", "String".所以Object.prototype.toString()的输出结果就是这种格式的字符串[object Array],[object Boolean]。

在ES5.1中,除了规范写的更详细一些以外,Object.prototype.toString方法和[[class]]内部属性的定义上也有一些变化,Object.prototype.toString方法的规范如下:

Object.prototype.toString ( )
在toString方法被调用时,会执行下面的操作步骤:

1 如果this的值为undefined,则返回"[object Undefined]".
2 如果this的值为null,则返回"[object Null]".
3 让O成为调用ToObject(this)的结果.
4 让class成为O的内部属性[[Class]]的值.
5 返回三个字符串"[object ", class, 以及 "]"连接后的新字符串.

可以看出,比ES3多了1,2,3步.第1,2步属于新规则,比较特殊,因为"Undefined"和"Null"并不属于[[class]]属性的值。经统计,可返回的类型有"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"比ES3多了2种分别是arguments对象的[[class]]成了"Arguments",而不是以前的"Object",还有就是多个了全局对象JSON,它的[[class]]值为"JSON"。

最后的最后提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以都转换成小写,以防出错,Object.prototype.toString().call(param).toLowerCase()即可。

Javascript 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 #Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 #Javascript
jQuery把表单元素变为json对象
Nov 06 #Javascript
JQuery插件开发示例代码
Nov 06 #Javascript
javascript实现yield的方法
Nov 06 #Javascript
Javascript事件实例详解
Nov 06 #Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 #Javascript
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php遍历目录viewDir函数
2009/12/15 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Django中使用Celery的方法示例
2018/11/29 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python 图像平移和旋转的实例
2019/01/10 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python和php学习哪个更有发展
2020/06/17 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
优秀团员事迹材料1500字
2014/08/31 职场文书
2015年药房工作总结
2015/04/25 职场文书
战友聚会致辞
2015/07/28 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书