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

//使用关键字: typeof

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

 console.log(typeof 17);
console.log(typeof '17');
console.log(typeof true);

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

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

//可知:null 是object类型。

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

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

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

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

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

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

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

 console.log((17) instanceof Number);
console.log(new Number(17) instanceof Number);
console.log(Number(17) instanceof Number);

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

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

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

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

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

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

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

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

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

 function test(num1,num2){
  console.log(num1);
  num1=10;
  console.log(arguments[0]+" "+num2);
  arguments[0]=2;
  console.log(num1+" "+num2);
  console.log(arguments instanceof Array);
  console.log(arguments.toString());
}
test(0,1);

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

 function f4(arg1,arg2,arg3){
  console.log(arguments.length);
  for(var index=0,length=arguments.length;index<length;index++){
  console.log(arguments[index]);
  }
}
f4('中国',"福建");
f4('I ','am ','dylan');
f4('I ','am ','dylan','!!!');

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

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

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

 function testLength1(){
console.log("testLength1.length="+testLength1.length);
console.log("没有参数,因此length为0。");
console.log("arguments.callee.length="+arguments.callee.length);
}
function testLength2(name){
console.log("testLength2.length="+testLength2.length);
console.log("有一个参数,参数长度为1");
console.log("arguments.callee.length="+arguments.callee.length);
console.log("arguments.length="+arguments.length);
} testLength1();
testLength2(); //注意
testLength2("dylan");
console.info(testLength1.length);
console.info(testLength2.length);

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

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

 var o1 ={
name: 'dylan',
getName: function(){
return this.name;
},
setName: function(greet,name){
return greet+" , "+ name
}
} var o2 ={
name: 'bady',
getName: function(){
return this.name;
16 }
}
//var o3={name:'hello'};
var o3={};

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

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

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

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

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

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

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

 function toType(type){
if(arguments.length==0){
return ;
}
if((typeof type)!=='object'){
return typeof type;
} //return ({}).toString.call(type);
return ({}).toString.call(type).match(/\s(\w+)/)[1];
}
console.log(toType([12]));
console.log(toType({}));
console.log(toType(function(){}));
console.log(toType(17));
console.log(toType('17'));
console.log(toType(false));
console.log(toType(new Number(17)));
console.log(toType(null));
console.log(toType(undefined));
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. Visual Studio-Sequence Diagram

    UML Design Via Visual Studio-Sequence Diagram 本文主要介绍在Visual Studio中设计时序图,内容如下: 何时使用时序图 时序图元素介绍 条件.循环 ...

  2. ShellExecuteEx的使用方法

    关于怎样在c++中启动外部的exe程序,之前看到在百度一搜就看到了: ShellExecute(this->m_hWnd,"open","calc.exe" ...

  3. Linux-常用命令1---对文件进行查看、复制、移动和分割

    基于Linux的操作系统是一种自由和开放源代码的类UNIX操作系统. Linux的几大特点决定了它的不可代替和无法超越性: (1)免费的/开源的:(2)支持多线程/多用户: (3)安全性好; (4)对 ...

  4. Exception dispatching input event. use XlistView

    今天上午解决Bug,一个上午的时间: log: 11-01 14:49:14.826: E/InputEventReceiver(30810): Exception dispatching input ...

  5. 响应式web前端框架Foundation & Bootstrap 对比

    Foundation & Bootstrap都是易用.强大且灵活的前端框架,用于构建基于任何设备上的 Web 应用.提供流式布局,及多种 js UI 组件,如导航.表单.按钮.Tabs 等等. ...

  6. Windows系统服务的编写。

    实验资源下载地址:点击打开链接 只是不知道能不能从服务向桌面进程传递消息,,就像两个桌面进程之间用Sendmessage似的..希望有知道的大神可以指点一下..不胜感激.. 因为微软在Vista之后, ...

  7. 初探Django Admin(一)

    前面的文章记录了django项目的一些操作,插入数据部分是手动在shell中操作的,如果能有一个图形界面来管理我们的数据,那该多好~ Django已经想到大家会需要这个功能,通过简单的配置,就能使用d ...

  8. javascript的预编译和执行顺序

    原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...

  9. Spring IOC之基于注解的容器配置

    Spring配置中注解比XML更好吗?基于注解的配置的介绍提出的问题是否这种途径比XML更好.简单来说就是视情况而定. 长一点的答案是每一种方法都有自己的长处也不足,而且这个通常取决于开发者决定哪一种 ...

  10. Java设置环境变量

    客上转过来的. 非常多人写了非常久java代码.还不知道环境变量是怎么一回事.科普一下. 一.java设置环境变量 - 精简版   1.右键打开我的电脑->属性->高级->环境变量 ...