DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 如何檢測JavaScript的各種類型
如何檢測JavaScript的各種類型
編輯:關於JavaScript     

一、先介紹下5種原始類型

JavaScript中5種原始類型為stringnumberbooleanundefinednull

var name = "Jack";
var age = 32;
var single = false;
var app;  //undefined

console.log(typeof name);  //string
console.log(typeof age);  //number
console.log(typeof single); //boolean
console.log(typeof app);  //undefined
console.log(typeof null);  //object

發現除null外的其他4種基本類型均可以用typeof來識別:

if(typeof name === "string") { name += "Zhang"; }
if(typeof age === "number") { age++; }
if(typeof single === "boolean" && single) { … }
if(typeof app === "undefined") { app = {}; }

因為typeof null會得到object,所以直接用===來檢測null:

if(el === null) { … }

二、對象

JavaScript的對象包括內置對象(Date,RegExp ,Error等)和自定義對象

(注意,Function和Array雖然也都是內置對象,但下一節單獨講)

對象不能像基本類型那樣用typeof來檢測了,因為檢測出來的結果都是object

console.log(typeof new Date());  //object
console.log(typeof new RegExp()); //object
console.log(typeof new Error());  //object
console.log(typeof new Person()); //用typeof檢測出自定義對象也是object

要改用instanceof來檢測:

var date = new Date();
var reg = new RegExp();
var err = new Error();
var me = new Person();

if(date instanceof Date) {  //檢測日期
  year = date.getFullYear(); 
}
if(reg instanceof RegExp) {  //檢測正則表達式
  reg.test(...); 
}
if(err instanceof Error) {  //檢測異常
  throw err; 
}
if(me instanceof Person) {  //檢測自定義對象
  ... 
}

但自定義對象有個問題,假設浏覽器frameA裡和frameB裡都定義了Person。 frameA裡定義了me對象,用me instanceof Person檢測出來為true。但當自定義對象me傳給frameB後,在frameB裡instanceof會是false。

本節一開頭就說了,Function和Array雖然也都是內置對象,但留到下一節講。原因就是Function和Array也有和自定義對象相同的上述問題。因此Function和Array一般不用instanceof

三、Function

上面說了用instanceof檢測Function不能跨frame。因此用typeof來檢測,它可跨frame:

var func = function(){};
if(typeof func === 'function') { … }

但IE8以前用typeof來檢測DOM系函數會得到object,因此IE8以前改用in:

console.log(typeof document.getElementById);    //object,不是function
console.log(typeof document.getElementsByTagName); //object,不是function
console.log(typeof document.createElement);     //object,不是function

//IE8以前的IE浏覽器,要改用in來檢測是否支持DOM函數
if("getElementById" in document) { … }    
if("getElementsByTagName" in document) { … }
if("createElement" in document) { … }

四、Array

上面說了用instanceof檢測Array不能跨frame。ES5之前都自定義檢測方法。其中最精確的方法:依賴Array的toString會返回固定字符串”[Object Array]”的事實來檢測

function isArray(arr) {
  return Object.prototype.toString.call(arr) === "[Object Array]";
}

該方法精確且優雅,因此被很多庫所采納,最終在ES5被作為isArray方法引入了Array,參照MDN。現在你不需要自定義檢測方法了,直接用isArray()即可。

其他檢測方法,都各有缺陷,不能100%精確。但作為一種思路是可以借鑒的。例如依賴Array是唯一包含sort方法的對象的事實來檢測:

function isArray(arr) {
  return typeof arr.sort === "function";
}

如果是自定義對象也定義了sort方法,該方法就失效了。

五、屬性

檢測屬性是否在實例對象中應該用hasOwnProperty。如果你不關心屬性是在實例對象中還是在原型對象中,可以簡單點用in

例如檢測字面量對象屬性:

var Person = {
  name: "Jack",
  age: 33
};
if("name" in Person) { … }         //true
if(Person.hasOwnProperty("name")) { … }  //true

例如實例對象屬性:

var Person = function (name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.location = "Shanghai";

var me = new Person("Jack", 33)
if("name" in me) { … }         //true
if(me.hasOwnProperty("name")) { … }  //true
if("location" in me) { … }       //true
if(me.hasOwnProperty("location")) { … }//false

除此之外其他方法都不好:

if (object[propName])      //Not Good,你怎麼知道屬性值不是0或1?
if (object[propName] === null)    //Not Good,你怎麼知道屬性值不是null?
if (object[propName] === undefined)  //Not Good,你怎麼知道屬性值不是undefined?

總結

用typeof檢測string,number,boolean,undefined,Function

用===檢測null

用isArray()檢測Array

用instanceof檢測內置對象(除Function和Array)和自定義對象

用hasOwnProperty檢測屬性是否在實例對象中。如果你不關心屬性是在實例對象中還是在原型對象中,可以簡單點用in

好了,本篇介紹如何檢測JavaScript各種類型的內容就到這裡了,希望大家能夠認真學習本文的內容,或許對大家學習JavaScript有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved