//JS该如何检测数据的类型呢?

//使用关键字: typeof

//输出结果依次为:'number','string','boolean'.

  1. console.log(typeof 17);
  2. console.log(typeof '17');
  3. console.log(typeof true);

//输出结果依次为:'object','undefined'

  1. console.log(typeof null);
  2. console.log(typeof undefined);

//可知:null 是object类型。

//输出结果依次为:'number','object'. 可以设想一下String('17'),new String('17');

  1. console.log(typeof Number(17));
  2. console.log(typeof new Number(17));

//输出结果依次为:'string','object'

  1. console.log(typeof String('17'));
  2. console.log(typeof new String('17'));

//同理:'boolean','object'。

  1. console.log(typeof Boolean(true));
  2. console.log(typeof new Boolean(true));

//Why ?
//使用new 关键字是构造新的对象。new Number()是构建一个number对象。
//new Number(17) 是17 的包装类型对象。而单纯的Number(17)是强制转换,是转型函数。
//使用new调用基本包装类型的构建函数与直接调用同名的转型函数是不一样的。
//再看下面的实例,依次输出:false,true,false

  1. console.log((17) instanceof Number);
  2. console.log(new Number(17) instanceof Number);
  3. console.log(Number(17) instanceof Number);

//在Java编程中,我们都知道针对原始类型,Java API都提供对应包装对象。
//那么JS编程中,JS针对三种原始类型也提供了对应的包装对象:Number,String,Boolean.
//同理适用于String,Boolean.

//接着往下看。
//输出结果为:'object','object','function'

  1. console.log(typeof []);
  2. console.log(typeof {});
  3. console.log(typeof function(){});

//'object',阴魂不散,真令人讨厌。
//问题来了,该如何准确的判断这些'object'呢?

//先介绍下call,apply 方法。
//在JS中,函数是一等公民。即可构建对象,又可作为值来使用。
//声明函数很简单

  1. function f1(){
  2.   console.log("声明函数使用关键字function");
  3. }
  4. function f2(num1,num2){
  5.   console.log("这是带二个参数的函数。"+num1+num2);
  6. }
  7. function f3(who){
  8.   console.log("hello "+who);
  9.   return "我是有返回值的函数";
  10. }

//调用函数相当简单:一对圆括号,如果需要参数就附带上参数。

  1. f1();f2(1,2);console.info(f3('china'));

//关于函数表达式,函数作为值,在后面讲闭包时在讲。
//关于函数参数

  1. function test(num1,num2){
  2.   console.log(num1);
  3.   num1=10;
  4.   console.log(arguments[0]+" "+num2);
  5.   arguments[0]=2;
  6.   console.log(num1+" "+num2);
  7.   console.log(arguments instanceof Array);
  8.   console.log(arguments.toString());
  9. }
  10. test(0,1);

//在JS中,系统有一个叫作:arguments的东东进行维护函数的参数。argument不是Array的实例。
//但是arguments拥有类似数组的特性:比如可以使用方括号语法访问参数的元素,
//拥有length属性获取参数的个数。

  1. function f4(arg1,arg2,arg3){
  2.   console.log(arguments.length);
  3.   for(var index=0,length=arguments.length;index<length;index++){
  4.   console.log(arguments[index]);
  5.   }
  6. }
  7. f4('中国',"福建");
  8. f4('I ','am ','dylan');
  9. f4('I ','am ','dylan','!!!');

//正是因为有arguments类数组管理参数,所以在参数传递时JS不会去考虑参数的个数。
//同时请观察test函数,可以发现num1与argument[0]值不仅相等,而且是同步改变的。
//在传统面向对象编程中,构建函数是可以重载的,但是在JS中没有重载。
//function 也是对象。

  1. console.log(function(){} instanceof Object);

//扩展一下,既然function是对象,那么函数名就是指向函数的指针了。
//既然是对象就必有相应的属性与方法,function拥有length,prototype属性(此属性后续再讲)
//拥有apply,call方法。

  1. function testLength1(){
  2. console.log("testLength1.length="+testLength1.length);
  3. console.log("没有参数,因此length为0。");
  4. console.log("arguments.callee.length="+arguments.callee.length);
  5. }
  6. function testLength2(name){
  7. console.log("testLength2.length="+testLength2.length);
  8. console.log("有一个参数,参数长度为1");
  9. console.log("arguments.callee.length="+arguments.callee.length);
  10. console.log("arguments.length="+arguments.length);
  11. }
  12.  
  13. testLength1();
  14. testLength2(); //注意
  15. testLength2("dylan");
  16. console.info(testLength1.length);
  17. console.info(testLength2.length);

//一目了然了吧:length属性表示函数希望接收的命名参数的个数。
//arguments是个类数组,它主要作用是管理函数的参数。
//arguments.callee代表当前函数名,在本例中就是:testLenght2.
//使用argument.callee在递归中很有帮忙。感兴趣同学可以去探索一下。
//函数的length属性与函数调用时实际接收到的参数值并不一定相等。

//每个function都有二个方法:apply,call. 作用是执行指定函数(对象)的上下文。

  1. var o1 ={
  2. name: 'dylan',
  3. getName: function(){
  4. return this.name;
  5. },
  6. setName: function(greet,name){
  7. return greet+" , "+ name
  8. }
  9. }
  10.  
  11. var o2 ={
  12. name: 'bady',
  13. getName: function(){
  14. return this.name;
  15. 16 }
  16. }
  17. //var o3={name:'hello'};
  18. var o3={};

//调用o1的getName的方法,指定的上下文对象是o3,而o3没有name属性,所以返回undefined.

  1. console.log(o1.getName.call(o3));

//调用o1的getName的方法,此的上下文对象是o2。所以返回bady.

  1. console.log(o1.getName.call(o2));

//call与apply区分不大,主要在于apply 参数为数组。

  1. console.log(o1.setName.call(o2,'Hi',' tony '));
  2. console.log(o1.setName.apply(o2,['Hi',' fred ']));
  3. //console.log(o1.setName.apply(o2,'Hi',' fred '));

//ok,说了这么多,现在回归typeof

  1. function toType(type){
  2. if(arguments.length==0){
  3. return ;
  4. }
  5. if((typeof type)!=='object'){
  6. return typeof type;
  7. }
  8.  
  9. //return ({}).toString.call(type);
  10. return ({}).toString.call(type).match(/\s(\w+)/)[1];
  11. }
  12. console.log(toType([12]));
  13. console.log(toType({}));
  14. console.log(toType(function(){}));
  15. console.log(toType(17));
  16. console.log(toType('17'));
  17. console.log(toType(false));
  18. console.log(toType(new Number(17)));
  19. console.log(toType(null));
  20. console.log(toType(undefined));
  21. console.log(toType(String("dylan")));

//toType还可以这样优化。
//return ({}).toString.call(type).match(/\s(\w+)/)[1];

//最后还可以调用toLowerCase方法。

//return ({}).toString.call(type).match(/\s(\w+)/)[1].toLowerCase();

JavaScript数据类型检测详解的更多相关文章

  1. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  2. 【面试题】JS第七种数据类型Symbol详解

    JS第七种数据类型Symbol详解 点击打开视频讲解更加详细 一.什么是Symbol? Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值.它是JavaScript中的第 七种 ...

  3. APP漏洞扫描器之本地拒绝服务检测详解

    APP漏洞扫描器之本地拒绝服务检测详解 阿里聚安全的Android应用漏洞扫描器有一个检测项是本地拒绝服务漏洞的检测,采用的是静态分析加动态模糊测试的方法来检测,检测结果准确全面.本文将讲一下应用漏洞 ...

  4. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  5. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  6. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  7. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  8. 【转载】MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解

    [原文链接]:MyBatis JdbcType 与Oracle.MySql数据类型对应关系详解 1. Mybatis JdbcType与Oracle.MySql数据类型对应列表 2. Mybatis ...

  9. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

随机推荐

  1. rdlc报告vs2008编辑正常,在vs2012在对错误的编辑

    最近我们的系统开发的工具vs2008升级到2012,由于系统是非常的报告是由rdlc发展.今天 有需要修改的报告满足需求.直接使用vs2012正确rdlc报告编辑,结果本次变动后.报表都报错. 后来我 ...

  2. C# 反射技术应用

    反射(Reflection)是.NET中的重要机制,通过放射,可以在运行时获得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的 ...

  3. Java设计模式偷跑系列(十二)组合模式建模和实现

    转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39828653 组合模式(Composite):组合模式有时又叫部分-总体模式.将对象组合成 ...

  4. 深入理解C指针之三:指针和函数

    原文:深入理解C指针之三:指针和函数 理解函数和指针的结合使用,需要理解程序栈.大部分现代的块结构语言,比如C,都用到了程序栈来支持函数的运行.调用函数时,会创建函数的栈帧并将其推到程序栈上.函数返回 ...

  5. 一些常用的jquery数字正则表达式

    使用 <script type="text/javascript"> function validate(){ var reg = new RegExp("^ ...

  6. hibernate之使用Annotation注解搭建项目

    之前开发都是使用xml配置来开发项目,开发起来特别繁琐 大家会发现通过注解大大简化了我们开发流程,使我们从繁琐的XML配置中解放出来. 第一步:新建一个javaweb项目.并将hibernate需要的 ...

  7. 伺服驱动器UVW电机电源线相序错误

       我们有必要先了解此讨论的前提:编码器初始安装相位正确.伺服驱动器将全然"採信"电机编码器的初始安装相位所表征的电机电角度相位,无需在伺服电机 的UVW动力线接线连接后进行额外 ...

  8. Linux进程和线程的比較

    进程与线程 參考:http://www.cnblogs.com/blueclue/archive/2010/07/16/1778855.html 首先比較Linux进程和线程的创建的差别,以此展开: ...

  9. Cocos2d-x 3.0final 终结者系列教程12-Vector&amp;map&amp;value

    北京时间昨天下午,温40度.中午12:16我来到了篮球场点.思维1分钟决定开站 转球: 我和另一个3队友半开始, 我手中的球的那一刻我突然火爆球不稳,突然问,淡淡的味道橡胶和烧烤的味道混合. 个腾空跳 ...

  10. ckplayer

    ckplayer 的使用基本功能实现(一) 有个项目里用到视频播放功能,虽然是国产的插件,但我觉得做的还是不错,而且是免费使用,顺便支持下国内的一些项目(O(∩_∩)O~). 一.首先去官网下载 插件 ...