需要预习:call , typeof, js数据类型

1. isFunction中typeof的不靠谱

源码:

var isFunction = function isFunction( obj ) {

// Support: Chrome <=57, Firefox <=52
// In some browsers, typeof returns "function" for HTML <object> elements
// (i.e., `typeof document.createElement( "object" ) === "function"`).
// We don't want to classify *any* DOM node as a function.
return typeof obj === "function" && typeof obj.nodeType !== "number";
};

typeof 是为了区分数据类型,下面是MDN中总结的typeof中所有存在的值

问题一:我们都知道typeof null 出来的结果是‘object’,可这是为啥呢?MDN给出了答案 :因为null是空指针,而空指针在大多数平台中使用0x00表示,而js在实现初期通过用 0 作为对象的标签,所以对null也被判断为object。

问题二:既然typeof能够判断出function,为何jquery额外判断   typeof obj.nodeType !== "number" 呢?

long long ago,在那些古老的浏览器中:

1. typeof document.body.childNodes  // function   这在古老的 safari 3 中会出现

2.typeof document.createElement("object")  // function 同理还有 'embed'  'applet' ,  在古老的firefox中会出现,目前新版本不会存在

3.typeof /s/ // function  这种情况会在古老浏览器中出现,目前都会被判定为 object

通过以上问题我们可以看出,通过typeof判断数据类型在古老的浏览器中是极为不靠谱的,所以在jquery的isFunction的判断中额外添加了判断 检测对象是否为dom 对象

2.靠谱的数据类型判断 

源码:

var class2type = {};

var toString = class2type.toString;

// Populate the class2type map,这里并没有undefined
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
function( i, name ) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
} ); function toType( obj ) {
if ( obj == null ) {
return obj + "";
} // Support: Android <=2.3 only (functionish RegExp)
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call( obj ) ] || "object" :
typeof obj;
}

在代码中jquery做了这几件事:

1.jquery先提取出toString 这个方法

2.将写好的类型字符串分割并存入class2type中,class2type 数据结构如下:

3.定义toType方法,因为 toString(null)会得出‘ [object Undefined]’的结果,所以需要把null单独判断,注意null是没有toString这个方法的,所以通过 obj+''这个方式得到 'null'

4.在单独判断null后是一个三元运算符:等价于

 if(typeof obj === "object" || typeof obj === "function"){
// 因为上文提到存在typeof /s/ 为 function的情况,所以需要toString详细判断
// 对于判断不出的数据类型默认为object
retrun class2type[ toString.call( obj ) ] || "object";
} else {
// 通过上面typeof对类型判断的表格,判断非object function还是很可靠的,所以直接用原生方法
return typeof obj;
}

结论: 通过用toString方法可以判断出Boolean、Number、 String、 Function、 Array、 Date、 RegExp、 Object、 Error、 Symbol、undefined 这些数据类型,但是并不能判断出null,所以要综合判断,就酱

除此之外jquery还额外判断了当前对象是否为window,只用了如下的方法:

var isWindow = function isWindow( obj ) {
return obj != null && obj === obj.window;
};

前方的obj!=null 是为了防止开发人员在调用函数 isWindow时传入null 、undefined的时候报Uncaught TypeError: Cannot read property 'window' of null/undefined的错误。

还有isArrayLike,判断当前对象是不是类数组对象,类数组对象是什么,建议大家百度一下

function isArrayLike( obj ) {

    // Support: real iOS 8.2 only (not reproducible in simulator)
// `in` check used to prevent JIT error (gh-2145)
// hasOwn isn't used here due to false negatives
// regarding Nodelist length in IE
var length = !!obj && "length" in obj && obj.length,
type = toType( obj ); if ( isFunction( obj ) || isWindow( obj ) ) {
return false;
} return type === "array" || length === 0 ||
typeof length === "number" && length > 0 && ( length - 1 ) in obj;
}

首先判断obj中是否有length属性并取出length

然后排除obj是否是window 及 function

最后取值条件:1.是否是array(类数组对象集合当然包括数组) 2.存在length属性但length是0  3.判定length是数字且大于零,并在obj对象中存在length-1属性

看jquery3.3.1学js类型判断的技巧的更多相关文章

  1. 类型和原生函数及类型转换(二:终结js类型判断)

    typeof instanceof isArray() Object.prototype.toString.call() DOM对象与DOM集合对象的类型判断 一.typeof typeof是一个一元 ...

  2. JS类型判断typeof PK {}.toString.call(obj)

    参考链接:https://www.talkingcoder.com/article/6333557442705696719 先看typeof <!doctype html> <htm ...

  3. js类型判断-丰富加好用

    一, 自己有时候写一些东西,要做类型判断,还有测试的时候,对于原生的和jQuery中的类型判断,实在不敢恭维,所以就写了一个好用的类型判断,一般情况都够用的. function test(type) ...

  4. JS类型判断&原型链

    JS类型检测主要有四种 1.typeof Obj 2.L instanceof R 3.Object.prototype.toString.call/apply(); 4.Obj.constructo ...

  5. js类型判断:typeof与instanceof

    typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number,boolean,string,function(函数),object(NULL,数组,对象),und ...

  6. js类型判断

    console.log('---------------------'); var a="string"; console.log(a); //string var a=1; co ...

  7. js类型判断及鸭式辨型

    目录 instanceof constructor 构造函数名字 鸭式辨型 三种检测对象的类方式: instanceof.constructor .构造函数名字 用法如下: 1)instanceof ...

  8. js类型判断的方法

    var arr=[]; alert(Object.prototype.toString.call(arr)=='[object Array]');

  9. js 类型判断

随机推荐

  1. set(gcf,'DoubleBuffer','on')以及sort

    设置的目的是为了防止在不断循环画动画的时候会产生闪烁的现象,而这样便不会了.在动画的制作比较常用. Matlab排序函数-sort sort函数的调用格式: sort(X) 功能:返回对向量X中的元素 ...

  2. 【bzoj1596】[Usaco2008 Jan]电话网络 树形dp

    题目描述 Farmer John决定为他的所有奶牛都配备手机,以此鼓励她们互相交流.不过,为此FJ必须在奶牛们居住的N(1 <= N <= 10,000)块草地中选一些建上无线电通讯塔,来 ...

  3. hdu 2768 Cat vs. Dog (二分匹配)

    Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. CentOS 安装tomcat

    1.确保JDK已经安装,版本在1.8以上 2.到网管下载安装 wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-9/v9.0. ...

  5. BZOJ4137 & 洛谷4585:[FJOI2015]火星商店问题

    https://www.lydsy.com/JudgeOnline/problem.php?id=4137 https://www.luogu.org/problemnew/show/P4585 火星 ...

  6. ZOJ1081:Points Within——题解

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1081 题目大意:给定一个点数为 n 的多边形,点按照顺序给出,再给出 m ...

  7. HDOJ.2187 悼念512汶川大地震遇难同胞——老人是真饿了(贪心)

    悼念512汶川大地震遇难同胞--老人是真饿了 点我挑战题目 题目分析 每组数据给出所拥有的钱数,和大米的种类.每种大米给出单价(每单位重量)和大米的重量.求能买到的大米最大重量是多少? 采用贪心算法. ...

  8. GCJ2008 APAC local onsites C Millionaire

    自己Blog的第一篇文章,嗯... 接触这道题,是从<挑战程序设计竞赛>这本书看来的,其实头一遍读题解,并没有懂.当然现在已经理解了,想想当初可能是因为考虑两轮的那张概率图的问题.于是决定 ...

  9. JavaScript数据类型转换方法汇总

    转换为布尔型 用两次非运算(!): 1 !!5 ==> true 用布尔型的构造函数: 1 new Boolean(5) == > true 值转换为布尔类型为false:0,+0,-0, ...

  10. Linux 环境下用Tomcat 发布项目

    1.前提条件: a.安装远程连接Linux软件:F-Secure SSH File Transfer Trial[简写为:FSSH]: b.打开FSSH,远程连接Linux[单击“Quick Conn ...