這篇文章主要是對判斷javascript的數據類型的判斷方式進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助

數據類型的判斷有這么幾種方式

1、一元運算符 typeOf

2、關系運算符 instanceof

3、constructor 屬性

4、prototype屬性

一、typeof

typeof的返回值有以下幾種

簡單粗暴的方法，直接看代碼

1. // 以下代碼在版本 Google Chrome 45.0.2454.101 m 中測試通過 
2. // Numbers 
3. console.log(typeof 37 === 'number'); 
4. console.log(typeof 3.14 === 'number'); 
5. console.log(typeof Math.LN2 === 'number'); 
6. console.log(typeof Infinity === 'number'); 
7. console.log(typeof NaN === 'number'); // 盡管NaN是"Not-A-Number"的縮寫,意思是"不是一個數字" 
8. console.log(typeof Number(1) === 'number'); // 不要這樣使用! 
9.  
10. // Strings 
11. console.log(typeof "" === 'string'); 
12. console.log(typeof "bla" === 'string'); 
13. console.log(typeof (typeof 1) === 'string'); // console.log(typeof返回的肯定是一個字符串 
14. console.log(typeof String("abc") === 'string'); // 不要這樣使用! 
15.  
16. // Booleans 
17. console.log(typeof true === 'boolean'); 
18. console.log(typeof false === 'boolean'); 
19. console.log(typeof Boolean(true) === 'boolean'); // 不要這樣使用! 
20.  
21. // Symbols 
22. console.log(typeof Symbol() === 'symbol'); 
23. console.log(typeof Symbol('foo') === 'symbol'); 
24. console.log(typeof Symbol.iterator === 'symbol'); 
25.  
26. // Undefined 
27. console.log(typeof undefined === 'undefined'); 
28. console.log(typeof blabla === 'undefined'); // 一個未定義的變量,或者一個定義了卻未賦初值的變量 
29.  
30. // Objects 使用Array.isArray或者Object.prototype.toString.call方法可以從基本的對象中區分出數組類型 
31. console.log(typeof {a:1} === 'object'); 
32. console.log(typeof [1, 2, 4] === 'object'); 
33. console.log(typeof /^[a-zA-Z]{5,20}$/ === 'object'); 
34. console.log(typeof {name:'wenzi', age:25} === 'object'); 
35. console.log(typeof null === 'object');//true 
36.  
37. // 下面的容易令人迷惑，不要這樣使用！ 
38. console.log(typeof new Boolean(true) === 'object'); 
39. console.log(typeof new Number(1) === 'object'); 
40. console.log(typeof new Date() === 'object'); 
41. console.log(typeof new String("abc") === 'object'); 
42. console.log(typeof new Error() === 'object'); 
43.  
44. // 函數 
45. console.log(typeof function(){} === 'function'); 
46. console.log(typeof Math.sin === 'function'); 

typeof 只能檢查出來以上7幾種類型

二、instanceof

instanceof 運算符用于識別正在處理的對象的類型，要求開發者明確地確認對象為某特定類型

1、instanceof 和 constructor 沒有關系

1. var A = function() {}; 
2. A.prototype = {}; 
3.  
4. var B = {}; 
5. console.log(A.constructor);//function Function() { [native code] } 
6. console.log(B.constructor);//function Object() { [native code] } 
7.  
8. var a = new A(); 
9. A.prototype = {}; 
10.  
11. var b = new A(); 
12. b.constructor = A.constructor; 
13.  
14. console.log(a.constructor === A);//false 
15. console.log(a.constructor);//function Object() { [native code] } 
16. console.log(typeof A);//function Object() { [native code] } 
17.  
18. console.log(a.constructor === b.constructor);//false 
19. console.log(b.constructor);//function Function() { [native code] } 
20.  
21. console.log(a instanceof A);//false 
22. console.log(b instanceof A);//true 

2、instanceof又叫關系運算符，可以用來判斷某個構造函數的prototype屬性是否存在另外一個要檢測對象的原型鏈上

1. var str = new String("hello world"); 
2. console.log(str instanceof String);//true 
3. console.log(String instanceof Function);//true 
4. console.log(str instanceof Function);//false 

第三次輸出為什么會返回false呢 ?原文地址：Javascript中一個關于instanceof的問題

1. //表達式一的指向 
2. console.log(str.__proto__ === String.prototype);//true 
3. console.log(str instanceof String); //true 
4.  
5. //表達式二的指向 
6. console.log(String .__proto__ === Function.prototype);//true 
7. console.log(String instanceof Function);//true 
8.  
9. //表達式三的指向 
10. console.log(str .__proto__ === String.prototype);//true 
11. console.log(str .__proto__.__proto__ === String.prototype.__proto__);//true 
12. console.log(str .__proto__.__proto__ === Object.prototype);//true 
13. console.log(str .__proto__.__proto__.__proto__ === null);//true 
14. console.log(str instanceof Object);//true 
15. console.log(str instanceof Function);//false 

再看一個復雜的用法

1. console.log(Object instanceof Object);//true 
2. console.log(Function instanceof Function);//true 
3. console.log(Number instanceof Number);//false 
4. console.log(String instanceof String);//false 
5.  
6. console.log(Function instanceof Object);//true 
7.  
8. console.log(Foo instanceof Function);//true 
9. console.log(Foo instanceof Foo);//false 

為什么，這是為什么呢，要搞明白以下含義

1、語言規范中是如何定義這個運算符的

2、JavaScript 原型繼承機制

Object instanceof Object

1. // 為了方便表述，首先區分左側表達式和右側表達式 
2. ObjectL = Object, ObjectR = Object; 
3. console.log(ObjectL instanceof ObjectR);//true 

1. // 下面根據規范逐步推演 
2. console.log(ObjectL.__proto__ === Function.prototype); //true 
3. console.log(ObjectL.__proto__.__proto__ === Object.prototype);//true 

Function instanceof Function

1. FunctionL = Function, FunctionR = Function; 
2. console.log(FunctionL instanceof FunctionR);//true 
3. console.log(FunctionL.__proto__ === Function.prototype); //true 
4.  
5. <strong>Foo instanceof Foo 
6. </strong> 
7. function Foo(){} 
8. var foo = new Foo(); 
9. FooL = Foo, FooR = Foo; 
10. console.log(FooL instanceof FooR);//false 
11. console.log(FooL.__proto__ === Function.prototype );//true 
12. console.log(FooL.__proto__.__proto__ === Object.prototype );//true 
13. console.log(FooL.__proto__.__proto__.__proto__ === null );//true 

instanceof 在 Dojo 繼承機制中的應用

在 JavaScript 中，是沒有多重繼承這個概念的，就像 Java 一樣。但在 Dojo 中使用 declare 聲明類時，是允許繼承自多個類的

1. dojo.declare("Aoo",null,{}); 
2. dojo.declare("Boo",null,{}); 
3. dojo.declare("Foo",[Aoo,Boo],{}); 
4.  
5. var foo = new Foo(); 
6. console.log(foo instanceof Aoo);//true 
7. console.log(foo instanceof Boo);//false 
8.  
9. console.log(foo.isInstanceOf(Aoo));//true 
10. console.log(foo.isInstanceOf(Boo));//true 

instanceof和多全局對象(多個frame或多個window之間的交互)

在瀏覽器中，我們的腳本可能需要在多個窗口之間進行交互。多個窗口意味著多個全局環境，不同的全局環境擁有不同的全局對象，從而擁有不同的內置類型構造函數。這可能會引發一些問題。比如，表達式 [] instanceof window.frames[0].Array 會返回false，因為 Array.prototype !== window.frames[0].Array.prototype，因此你必須使用 Array.isArray(myObj) 或者Object.prototype.toString.call(myObj) === "[object Array]"來判斷myObj是否是數組。

1. // 以下代碼在版本 Google Chrome 45.0.2454.101 m 中測試通過 
2. // Numbers 
3. console.log(37 instanceof Number);//false 
4. console.log( 3.14 instanceof Number);.//false 
5. console.log( Math.LN2 instanceof Number);//false 
6. console.log( Infinity instanceof Number);//false 
7. console.log( NaN instanceof Number); // false盡管NaN是"Not-A-Number"的縮寫,意思是"不是一個數字" 
8. console.log( Number(1) instanceof Number); // false不要這樣使用! 
9.  
10. // Strings 
11. console.log( "" instanceof String);// false 
12. console.log( "bla" instanceof String);// false 
13. console.log( ( 1) instanceof String); // falseconsole.log(返回的肯定是一個字符串 
14. console.log( String("abc") instanceof String); // false 不要這樣使用! 
15.  
16. // Booleans 
17. console.log( true instanceof Boolean);// false 
18. console.log( false instanceof Boolean);// false 
19. console.log( Boolean(true) instanceof Boolean); //false 不要這樣使用! 
20.  
21. // Symbols 
22. console.log( Symbol() instanceof Symbol);// false 
23. console.log( Symbol("foo") instanceof Symbol);// false 
24. console.log( Symbol.iterator instanceof Symbol);// false 
25.  
26. // Undefined 
27. var blabla; 
28. //console.log( undefined instanceof Undefined);// Uncaught ReferenceError: Undefined is not defined 
29. //console.log( blabla instanceof Undefined); // Uncaught ReferenceError: Undefined is not defined 
30. console.log( undefined instanceof Object);// false 
31. console.log( blabla instanceof Object);// false 
32.  
33. // Objects 使用Array.isArray或者Object.prototype.toString.call方法可以從基本的對象中區分出數組類型 
34. console.log( {a:1} instanceof Object);//true 
35. console.log( [1, 2, 4] instanceof Object);//true 
36. console.log( /^[a-zA-Z]{5,20}$/ instanceof Object);//true 
37. console.log( {name:'wenzi', age:25} instanceof Object);//true 
38. console.log( null === Object);//false 
39.  
40. // 下面的容易令人迷惑，不要這樣使用！ 
41. console.log( new Boolean(true) instanceof Object);//true 
42. console.log( new Number(1) instanceof Object);//true 
43. console.log( new Date() instanceof Object);//true 
44. console.log( new String("abc") instanceof Object);//true 
45. console.log( new Error() instanceof Object);//true 
46.  
47. // 函數 
48. console.log( function(){} instanceof Function );//true 
49. console.log( Math.sin instanceof Function);//true 

注意：undefined和null是檢測的Object類型，因為js中沒有Undefined和Null的這種全局類型，number, string和boolean無法檢測出它的類型

三、constructor

在使用instanceof檢測變量類型時，我們是檢測不到number, 'string', bool的類型的。因此，我們需要換一種方式來解決這個問題

Object.prototype.constructor返回一個指向創建了該對象原型的函數引用。需要注意的是，該屬性的值是那個函數本身，而不是一個包含函數名稱的字符串。對于原始值(如1，true 或 "test")，該屬性為只讀，所有對象都會從它的原型上繼承一個 constructor 屬性

constructor本來是原型對象上的屬性，指向構造函數。但是根據實例對象尋找屬性的順序，若實例對象上沒有實例屬性或方法時，就去原型鏈上尋找，因此，實例對象也是能使用constructor屬性的

1. function Person(){ 
2.  
3. } 
4. var Tom = new Person(); 
5.  
6. console.log(Tom.constructor === Person);//true 

不過要注意，constructor屬性是可以被修改的，會導致檢測出的結果不正確

1. function Person(){ 
2.  
3. } 
4. function Student(){ 
5.  
6. } 
7. Student.prototype = new Person(); 
8. var John = new Student(); 
9. console.log(John.constructor==Student); // false 
10. console.log(John.constructor==Person); // true 

改變這個對象的constructor屬性的值

1. function Type() { }; 
2.  
3. var types = [ 
4. new Array, 
5. [], 
6. new Boolean, 
7. true, // remains unchanged 
8. new Date, 
9. new Error, 
10. new Function, 
11. function(){}, 
12. Math,  
13. new Number, 
14. 1, // remains unchanged 
15. new Object, 
16. {}, 
17. new RegExp, 
18. /(?:)/, 
19. new String, 
20. "test" // remains unchanged 
21. ]; 
22.  
23. for(var i = 0; i < types.length; i++) { 
24. types[i].constructor = Type; 
25. types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ]; 
26. }; 
27.  
28. console.log( types.join("/n") ); 

除了undefined和null，其他類型的變量均能使用constructor判斷出類型

四、萬能的Object.prototype.toString.call

使用toString()方法來檢測對象類型

1. function Type() { }; 
2.  
3. var toString = Object.prototype.toString; 
4. console.log(toString.call(new Date) === '[object Date]');//true 
5. console.log(toString.call(new String) ==='[object String]');//true 
6. console.log(toString.call(new Function) ==='[object Function]');//true 
7. console.log(toString.call(Type) ==='[object Function]');//true 
8. console.log(toString.call('str') ==='[object String]');//true 
9. console.log(toString.call(Math) === '[object Math]');//true 
10. console.log(toString.call(true) ==='[object Boolean]');//true 
11. console.log(toString.call(/^[a-zA-Z]{5,20}$/) ==='[object RegExp]');//true 
12. console.log(toString.call({name:'wenzi', age:25}) ==='[object Object]');//true 
13. console.log(toString.call([1, 2, 3, 4]) ==='[object Array]');//true 
14. //Since JavaScript 1.8.5 
15. console.log(toString.call(undefined) === '[object Undefined]');//true 
16. console.log(toString.call(null) === '[object Null]');//true 

附上判斷函數 Javascript中的數據類型知多少

五、jquery的實現 jquery: "1.8.2",

jquery中提供了一個$.type的接口，看看代碼

1. var m = Object.prototype.toString //501行 
2.  
3. E = {};//512行 
4.  
5. isFunction: function(a) { //645行 
6. return p.type(a) === "function" 
7. }, 
8. isArray: Array.isArray || function(a) { 
9. return p.type(a) === "array" 
10. } 
11. , 
12. isWindow: function(a) { 
13. return a != null && a == a.window 
14. }, 
15. isNumeric: function(a) { 
16. return !isNaN(parseFloat(a)) && isFinite(a) 
17. }, 
18. type: function(a) { 
19. return a == null ? String(a) : E[m.call(a)] || "object" 
20. }, 
21. isPlainObject: function(a) { 
22. if (!a || p.type(a) !== "object" || a.nodeType || p.isWindow(a)) 
23. return !1; 
24. try { 
25. if (a.constructor && !n.call(a, "constructor") && !n.call(a.constructor.prototype, "isPrototypeOf")) 
26. return !1 
27. } catch (c) { 
28. return !1 
29. } 
30. var d; 
31. for (d in a) 
32. ; 
33. return d === b || n.call(a, d) 
34. }, 
35. isEmptyObject: function(a) { 
36. var b; 
37. for (b in a) 
38. return !1; 
39. return !0 
40. }, 

可以看出來，jquery中就是用Object.prototype.toString.call實現的