西西軟件下載最安全的下載網(wǎng)站、值得信賴的軟件下載站!

首頁(yè)編程開(kāi)發(fā)javascript|JQuery → javascript中如何做對(duì)象的類型判斷

javascript中如何做對(duì)象的類型判斷

相關(guān)軟件相關(guān)文章發(fā)表評(píng)論 來(lái)源:西西整理時(shí)間:2012/11/30 9:07:13字體大。A-A+

作者:西西點(diǎn)擊:9次評(píng)論:0次標(biāo)簽: 對(duì)象

  • 類型:瀏覽輔助大。2KB語(yǔ)言:中文 評(píng)分:7.2
  • 標(biāo)簽:
立即下載

對(duì)象僅僅是一種特殊的數(shù)據(jù)類型而已,并擁有一系列的屬性和方法。
讓我們用一個(gè)例子來(lái)理解:一個(gè)人就是一個(gè)對(duì)象。屬性是和對(duì)象有關(guān)的值。人的屬性包括其名字、身高、體重、年紀(jì)、膚色、眼睛的顏色等等。所有的人都有這些屬性,但是每個(gè)人的屬性的值卻各不相同。對(duì)象也擁有方法。方法是可施加于對(duì)象上的行為。人的方法可能是吃、睡、工作、玩等等。

JavaScript對(duì)象

ECMA-262將對(duì)象(object)定義為"屬性的無(wú)序集合,每個(gè)屬性存放一個(gè)原始值、對(duì)象或函數(shù)"(unordered collection of properties each of which contains a primitive value, object, or function)。這意味著對(duì)象是無(wú)特定順序的值的數(shù)組。在ECMAScript中,對(duì)象由特性(Attribute)構(gòu)成,特性可以是原始值,也可以是引用值。如果特性存放的是函數(shù),它將被看作對(duì)象的方法(Method),否則該特性被看作屬性(Property)。

最近在翻看John Resig的大作《Pro JavaScript Techniques》,里面講到了如何做javascript的類型判斷的問(wèn)題。文中介紹了兩種方式,一種是使用typeof,另一種是使用constructor。略感遺憾的是作為jquery的作者,他盡然沒(méi)有介紹jquery使用的類型判斷方式。不過(guò)沒(méi)有關(guān)系,我在這里給大家一起總結(jié)下。

在這里我首先像大家推薦一個(gè)很好用的在線編輯器:http://jsfiddle.net/。他提供了jquery、mootools、prototype和YUI三個(gè)主流js框架的各個(gè)版本,當(dāng)你需要編寫(xiě)簡(jiǎn)單的js測(cè)試程序的時(shí)候可以直接使用它。省去了打開(kāi)編輯軟件,創(chuàng)建各種類型文件的步驟。編輯代碼之后,點(diǎn)擊[Run]按鈕,一切搞定。

1.typeof

typeof是我們?cè)谧鲱愋团袛鄷r(shí)最常用的方法,他的優(yōu)點(diǎn)就是簡(jiǎn)單、好記,缺點(diǎn)是不能很好的判斷object、null、array、regexp和自定義對(duì)象。

下面是我的測(cè)試代碼:

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;

function fn(){
    alert('this is a function');
}

function User(name){
    this.name=name;
}
var user=new User('user');

console.log(typeof str);
console.log(typeof arr);
console.log(typeof num);
console.log(typeof bool);
console.log(typeof obj);
console.log(typeof nullObj);
console.log(typeof undefinedObj);
console.log(typeof reg);
console.log(typeof fn);
console.log(typeof user);
   
代碼運(yùn)行結(jié)果:

2.constructor

現(xiàn)在介紹一種不常使用的方法,對(duì)象構(gòu)造器constructor。他的優(yōu)點(diǎn)是支持大部分對(duì)象類型的判斷,特別是對(duì)自定義對(duì)象的判斷;缺點(diǎn)是不能在null和undefined上使用。

測(cè)試代碼和之前的差不多,區(qū)別就是使用XXX.constructor代替了typeof。

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');

console.log(str.constructor);
console.log(arr.constructor);
console.log(num.constructor);
console.log(bool.constructor);
console.log(obj.constructor);
console.log(reg.constructor);
console.log(fn.constructor);
console.log(user.constructor);

console.log(nullObj.constructor);
console.log(undefinedObj.constructor);

運(yùn)行結(jié)果:

運(yùn)行到 console.log(nullObj.constructor); 的時(shí)候,瀏覽器報(bào)錯(cuò):Uncaught TypeError: Cannot read property 'constructor' of null。類似的問(wèn)題也發(fā)生在console.log(undefinedObj.constructor); 上面:Uncaught TypeError: Cannot read property 'constructor' of undefined。

3.Object.prototype.toString.call()

最后要介紹的是jquery中使用的方式,Object.prototype.toString.call()。優(yōu)點(diǎn)是支持絕大多數(shù)類型的判斷,唯一的缺點(diǎn)是不支持自定義對(duì)象的判斷。

測(cè)試代碼如下:

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');

var toString=Object.prototype.toString;

console.log(toString.call(str));
console.log(toString.call(arr));
console.log(toString.call(num));
console.log(toString.call(bool));
console.log(toString.call(obj));
console.log(toString.call(reg));
console.log(toString.call(fn));
console.log(toString.call(user));
console.log(toString.call(nullObj));
console.log(toString.call(undefinedObj));

運(yùn)行結(jié)果:

console.log(toString.call(user)); 的返回結(jié)果為:[object Object],不能做進(jìn)一步判斷。

總結(jié)

javascript中經(jīng)常使用的對(duì)象判斷方式包括:typeof、constructor和Object.prototype.toString.call()。其中typeof很好理解,他是JavaScript本身支持的語(yǔ)法。constructor很少使用,但是相信大家通過(guò)demo也能看懂他代表的意思。至于Object.prototype.toString.call()可能多少會(huì)讓人有點(diǎn)費(fèi)解,他和XXX.toString()有什么區(qū)別呢,為什么不能直接使用XXX.toString()呢?

我們?cè)跒g覽器中運(yùn)行下面的代碼:

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var undefinedObj=undefined;
var reg=/reg/;
function fn(){
    alert('this is a function');
}
function User(name){
    this.name=name;
}
var user=new User('user');

console.log(str.toString());
console.log(arr.toString());
console.log(num.toString());
console.log(bool.toString());
console.log(obj.toString());
console.log(reg.toString());
console.log(fn.toString());
console.log(user.toString());
console.log(nullObj.toString());
console.log(undefinedObj.toString());

查看運(yùn)行結(jié)果:

null和undefined因?yàn)椴淮嬖趖oString()方法,所以會(huì)報(bào)錯(cuò),我們就不去管他們了。至于其他對(duì)象,通過(guò)toString()返回的內(nèi)容和使用Object.prototype.toString.call()返回的內(nèi)容差別很大。這是因?yàn)镺bject.prototype.toString()方法被設(shè)計(jì)用來(lái)返回對(duì)象類型的。String、Array、Boolean、Regexp、Number和Function都繼承自O(shè)bject,同時(shí)也就繼承了Object的原型方法toString(),但是他們都對(duì)toString()進(jìn)行了重寫(xiě)。執(zhí)行xxx.toString()時(shí)使用的是重寫(xiě)后的方法,返回的結(jié)果自然會(huì)和Object.prototype.toString.call()的結(jié)果不一致。

通過(guò)上面的例子,大家一定對(duì)這三種方式有了更深刻的認(rèn)識(shí),熟悉他們的優(yōu)缺點(diǎn),然后可以根據(jù)自己的需要選擇合適的方式。推薦使用Object.prototype.toString.call()方法,因?yàn)樗芙鉀Q絕大部分情況的判斷,在遇到返回值為[object Object]時(shí),再使用constructor輔助判斷,看是否是自定義對(duì)象。

    推薦文章

    沒(méi)有數(shù)據(jù)