看jquery3.3.1学js类型判断的技巧

需要预习: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后是一个三元运算符:等价于

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

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

原文地址:https://www.cnblogs.com/JhoneLee/p/8856567.html

时间: 2024-10-13 11:16:25

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

js类型判断及鸭式辨型

目录 instanceof constructor 构造函数名字 鸭式辨型 三种检测对象的类方式: instanceof.constructor .构造函数名字 用法如下: 1)instanceof console.log([1,2,3] instanceof Array); true console.log([1,2,3] instanceof Object); true 尽管构造函数是原型的唯一标识,instanceof运算符的右操作数是构造函数,instanceof实际计算过程中检测的是对

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

参考链接:https://www.talkingcoder.com/article/6333557442705696719 先看typeof <!doctype html> <html lang="en">     <head>         <meta charset="UTF-8" />         <script type="text/javascript" src="&

js类型判断

js类型有:字符串.数字.布尔.数组.对象.null.undefined. typeof console.log(typeof "a"); //string console.log(typeof 1); //number console.log(typeof true); //boolean console.log(typeof []); //object console.log(typeof new {}); //object console.log(typeof null); //

一次搞定js类型判断

对于一些灵活或者通用的函数,需要根据输入的参数类型,来执行一些逻辑,或简单的报错.因此准确的判断数据类型就尤为重要. 第一种方式,也是最容易想到的方式,typeof.它可以很容易的判断出大部分数据的类型,然而array和null会被误判为object类型. 第二种方式,instanceof,然而它的判断逻辑是基于实例的,跨实例或非实例则会出现问题,而且修改_proto_会影响判断结果. 第三种方式,也是最推荐的一种,Object.prototype.toString.call() functio

js 基础复习 之 js 类型判断

ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型. 1.基本类型 基本的数据类型有:`undefined,boolean,number,string,null.基本类型的访问是按值访问的,就是说你可以操作保存在变量中的实际的值.基本类型有以下几个特点: 1.基本类型的值是不可变得: 1.任何方法都无法改变一个基本类型的值. var name = 'hello'; name.toUpperCase(); // 输出 'HELLO' console.log(name); // 输出

js类型判断的方法

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

JS条件判断小技巧

经常code review,我发现很容易写出一堆冗长的代码.今天就列几个比较常见的“解决之道”,看看如何减少JS里的条件判断. 提前返回,少用if...else 但是过多的嵌套,还是挺令人抓狂的.这里有一个很典型的条件嵌套: function func() { var result; if (conditionA) { if (condintionB) { result = 'Success'; } else { result = 'Error1'; } } else { result = 'E

Underscore.js 常用类型判断以及一些有用的工具方法

1. 常用类型判断以及一些有用的工具方法 underscore.js 中一些 JavaScript 常用类型检查方法,以及一些工具类的判断方法. 首先我们先来谈一谈数组类型的判断.先贴出我自己封装好的函数. 第一: 在ES5里面有一个检测数组的函数,就是Array.isArray(); (毕竟原生的才是最屌的)但是如果老版本的浏览器不支持ES5呢.那怎么办 所以我们这个时候要想其他的办法.   来回忆下 instanceof 运算符的使用方式.a instanceof b,如果返回 true,表

js中判断对象具体类型

大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2");//string alert(typeof [1,2,3]);//object alert(typeof {"name":"zhuhui"})//object </script> 从上面中我们可以看出数组和普通对象用typeof判断出来都是object