Look at jquery3.3.1 to learn the skills of js type judgment

Need to preview: call , typeof, js data type

1. The typeof in isFunction is unreliable

Source code:

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 is to distinguish data types, the following are all the existing values in typeof summarized in MDN

Question 1: We all know that the result of typeof null is 'object', but why? MDN gave the answer : because null is a null pointer, and the null pointer is represented by 0x00 in most platforms, and js used 0 as the label of the object in the early stage of implementation, so null is also judged as an object.

Question 2: Since typeof can determine function, why does jquery additionally determine typeof obj.nodeType !== "number"?

long long ago, in those ancient browsers:

1. typeof document.body.childNodes // function This will appear in the old safari 3

2.typeof document.createElement("object") // function Similarly, there are 'embed' 'applet' , which will appear in the old firefox, and the new version will not exist at present

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

From the above questions, we can see that judging the data type by typeof is extremely unreliable in ancient browsers, so in the judgment of jquery's isFunction, an additional judgment is added to determine whether the detection object is a dom object

2. Reliable data type judgment

Source code:

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;
}

In the code jquery does the following things:

1. jQuery first extracts the method toString

2. Divide the written type string and store it in class2type. The data structure of class2type is as follows:

3. Define the toType method, because toString(null) will get the result of '[object Undefined]', so it is necessary to judge null separately. Note that there is no toString method for null, so 'null' is obtained by obj+''

4. After judging null alone, it is a ternary operator: equivalent to

1  if ( typeof obj === "object" || typeof obj === "function" ){
 2      // Because there is a case where typeof /s/ is a function as mentioned above, it needs toString to judge in detail 
3     // For The default data type that cannot be judged is object 
4      retrun class2type[ toString.call( obj ) ] || "object" ;
 5 } else {
 6      // Through the above table of typeof type judgment, it is still very reliable to judge the non-object function , so directly use the native method 
7      return  typeof obj;
 8 }

Conclusion: The data types of Boolean, Number, String, Function, Array, Date, RegExp, Object, Error, Symbol, and undefined can be judged by using the toString method, but null cannot be judged, so to make a comprehensive judgment, just sauce

Look at jquery3.3.1 to learn the skills of js type judgment

Guess you like