JQuery static method type usage and source code analysis

Source: Internet
Author: User

JQuery static method type usage and source code analysis
JQuery. the type method is a tool method for detecting data types. Before analyzing its usage, summarize the methods that js provides for us to monitor data types; i. below is the test code var data = [], a = '000000', B = 0, c = true, d = {}, e = [123], f = function () {}, g = null, h = undefined, I = Math, j =/$. + ^/, k = new Date (); data. push (a, B, c, d, e, f, g, h, I, j, k); for (var key = 0; key <data. length; key ++) {console. log (the data [key] + 'data type is' + typeof data [key]);} in the code above, I tried to list different js data types and objects, the execution result is as follows:

// 123 of the data type is string // 0 of the data type is number // true of the data type is boolean // [object Object] of the data type is object // 123 of the Data Type type: object // function () the data type of {} is function // undefined. The data type of undefined // [object Math] is object // $. + ^/the data type is object // Wed Jul 22 2015 15:47:25 GMT + 0800 (China Standard Time). The data type is object.

 

We can see that five of the six basic types of javascript can be detected in typeof, namely, String, Boolean, Number, Undefined. In the Object, null is returned as an Object and Function is taken out separately, basically, the task can still be completed, but it cannot be further differentiated for the composite type. For example, is it an array or an object? At this time, you can use another operator instanceOf. 2. The instanceOf operator can also write a test code.
var data=[],a='123',b=0,c=true,d={1:23},e=[123],f=function(){},g=null,h=undefined,i=Math,j=/$.+^/,k= new Date();data.push(a,b,c,d,e,f,g,h,i,j,k);console.log(a instanceof String);console.log(b instanceof Number);console.log(c instanceof Boolean);console.log(d instanceof Object);console.log(e instanceof Array);console.log(f instanceof Function);console.log(j instanceof RegExp);console.log(k instanceof Date);

 

The running result in the browser is as follows:
 // false// false// true// true// true// true// true 

 

We can see that only the results of the composite type are true, and the types must be one-to-one matched. Obviously, this method can only be used as a test method, we cannot make judgments when we do not know the specific data type. We can use it as an auxiliary test method for typeof. 3. Write the test code first when the constructor attribute is the same.
Var data = [], a = '000000', B = 0, c = true, d = {}, e = [123], f = function (){}, g = null, h = undefined, I = Math, j =/$. + ^/, k = new Date (); data. push (a, B, c, d, e, f, g, h, I, j, k); for (var key = 0; key <data. length; key ++) {try {console. the log (data [key] + 'detection result is' + data [key]. constructor);} catch (e ){}}

 

The running result is as follows:
// 123 of the detection results are function String () {[native code]} // 0 of the detection results are function Number () {[native code]} // true: function Boolean () {[native code]} // [object Object]: function Object () {[native code]} // The detection result of 123 is function Array () {[native code]} // function () {}. The detection result is function Function function () {[native code]} // The detection result of [object Math] is function Object () {[native code]} // $. + ^/Check Result: function RegExp () {[native code]} // Wed Jul 22 2015 16:23:41 GMT + 0800 (China Standard Time) check result is function Date () {[native code]}

 

Null call reports an error, so the try statement is added. This method can easily obtain its constructor, so that it can be judged, unfortunately, this attribute is not read-only and can be modified, once modified or involves issues such as Object Inheritance, the program may fail to run, for example, null. Is there any other method? 4. Object. prototype. toString method this method obtains the string representation of the constructor by calling the toString method of the data to be tested. The test code is as follows: var data = [], a = '2016 ', B = 0, c = true, d = {}, e = [123], f = function () {}, g = null, h = undefined, I = Math, j =/$. + ^/, k = new Date (); data. push (a, B, c, d, e, f, g, h, I, j, k); for (var key = 0; key <data. length; key ++) {console. the log (data [key] + 'detection result is' + Object. prototype. toString. call (data [key]);} the running result is as follows:
// 123 of the detection results are [object String] // 0 of the detection results are [object Number] // true of the detection results are [object Boolean] // [object Object object] the check result is [object Object] // 123. The check result is [object Array] // function () {} Check Result: [object Function] // null check result: [object Null] // undefined check result: [object Undefined] // [object Math] Check Result the result is [object Math] // $. + ^/Check Result: [object RegExp] // Wed Jul 22 2015 16:33:05 GMT + 0800 (China Standard Time) Check/Test Result: [object Date]

 

Is it nice to see the result! Not only can all data types be detected, but the Object sub-types are also realized without worrying about error reporting. The reason is that all objects are based on objects, in fact, jQery also adopts this method, but it makes us look better after further processing! Let's see how to use jQuery. type result var data = [], a = '000000', B = 0, c = true, d = {}, e = [123], f = function () {}, g = null, h = undefined, I = Math, j =/$. + ^/, k = new Date (); data. push (a, B, c, d, e, f, g, h, I, j, k); for (var key = 0; key <data. length; key ++) {console. the log (data [key] + 'detection result is' + $. type (data [key]);} running result:
// 123 check result: string // 0 check result: number // check result: boolean // [object Object] Check Result: object // 123 check result is array // function () {} Check Result: function // null check result: null // undefined check result: undefined // [object Math] Check Result: object // $. + ^/the check result is regexp // Wed Jul 22 2015 16:44:25 GMT + 0800 (China Standard Time). The check result is date.

 

OK. The result is impeccable. The source code is attached below: type: function (obj) {return obj = null? String (obj): class2type [toString. call (obj)] | "object" ;}, if it is undefined or null, their data is of their own tired type, and the string form is directly returned. If it is other data, the toString method is executed, this method has previously introduced toString = Object. prototype. toString. If the returned result is similar to that of [object Date], if it cannot be obtained, the returned object is returned. The result is the class2type key. The following describes the definition of class2type: // Populate the class2type mapjQuery. each ("Boolean Number String Function Array Date RegExp Object ". split (""), function (I, name) {class2t Ype ["[object" + name + "]"] = name. toLowerCase () ;}); The type method has been analyzed.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.