快捷導(dǎo)航

詳解JavaScript中typeof與instanceof用法

更新時(shí)間：2018年10月24日 10:05:41 作者：Double405

typeof用以獲取一個(gè)變量或者表達(dá)式的類(lèi)型而instanceof用于判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

今天寫(xiě)JS代碼，遇到動(dòng)態(tài)生成多個(gè)名稱(chēng)相同的input復(fù)選按鈕

需要判斷其是否是數(shù)組，用到了if (typeof(document.MapCheckMgr.checkid)!="undefined")

以前用得少，就順便查了一下關(guān)于typeof的那些事

typeof用以獲取一個(gè)變量或者表達(dá)式的類(lèi)型，typeof一般只能返回如下幾個(gè)結(jié)果：

number,boolean,string,function（函數(shù)）,object（NULL,數(shù)組，對(duì)象）,undefined。

如：

alert(typeof (123));//typeof(123)返回"number" 
alert(typeof ("123"));//typeof("123")返回"string"

我們可以使用typeof來(lái)獲取一個(gè)變量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)因?yàn)槿绻鸻不存在（未聲明）則會(huì)出錯(cuò)，

正因?yàn)閠ypeof遇到null,數(shù)組,對(duì)象時(shí)都會(huì)返回object類(lèi)型，所以當(dāng)我們要判斷一個(gè)對(duì)象是否是數(shù)組時(shí)

或者判斷某個(gè)變量是否是某個(gè)對(duì)象的實(shí)例則要選擇使用另一個(gè)關(guān)鍵語(yǔ)法instanceof

instanceof用于判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例，如var a=new Array();alert(a instanceof Array);會(huì)返回true，

同時(shí)alert(a instanceof Object)也會(huì)返回true;這是因?yàn)锳rray是object的子類(lèi)。

再如：function test(){};var a=new test();alert(a instanceof test)會(huì)返回true。

<script>
  var str = new String();
  function show(str1){
  if(str1 instanceof String){
    alert('1');
  }else{
    alert('0');
  }
  }
  show(str);
  str = "abccddd";
  if(typeof str=='string'){alert(str);}
  else{alert('0');}
 </script>

關(guān)于typeof

typeof一元運(yùn)算符，用來(lái)返回操作數(shù)類(lèi)型的字符串。

typeof幾乎不可能得到它們想要的結(jié)果。typeof只有一個(gè)實(shí)際應(yīng)用場(chǎng)景，就是用來(lái)檢測(cè)一個(gè)對(duì)象是否已經(jīng)定義或者是否已經(jīng)賦值。而這個(gè)應(yīng)用卻不是來(lái)檢查對(duì)象的類(lèi)型。

Value	Class	Type
"foo"	String	string
new String("foo")	String	object
1.2	Number	number
new Number(1.2)	Number	object
true	Boolean	boolean
new Boolean(true)	Boolean	object
new Date()	Date	object
new Error()	Error	object
[1,2,3]	Array	object
new Array(1, 2, 3)	Array	object
new Function("")	Function	function
/abc/g	RegExp	object (function in Nitro/V8)
new RegExp("meow")	RegExp	object (function in Nitro/V8)
{}	Object	object
new Object()	Object	object

上面表格中，Type 一列表示 typeof 操作符的運(yùn)算結(jié)果?？梢钥吹?，這個(gè)值在大多數(shù)情況下都返回 "object"。

Class 一列表示對(duì)象的內(nèi)部屬性 [[Class]] 的值。

JavaScript 標(biāo)準(zhǔn)文檔中定義: [[Class]] 的值只可能是下面字符串中的一個(gè)： Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String.

為了獲取對(duì)象的 [[Class]]，我們需要使用定義在 Object.prototype 上的方法 toString。

對(duì)象的類(lèi)定義

JavaScript 標(biāo)準(zhǔn)文檔只給出了一種獲取 [[Class]] 值的方法，那就是使用 Object.prototype.toString。

function is(type, obj) {
  var clas = Object.prototype.toString.call(obj).slice(8, -1);
  return obj !== undefined && obj !== null && clas === type;
}
is('String', 'test'); // true
is('String', new String('test')); // true

上面例子中，Object.prototype.toString 方法被調(diào)用，this 被設(shè)置為了需要獲取 [[Class]] 值的對(duì)象。

注：Object.prototype.toString 返回一種標(biāo)準(zhǔn)格式字符串，所以上例可以通過(guò) slice 截取指定位置的字符串，如下所示：

Object.prototype.toString.call([])  // "[object Array]"
Object.prototype.toString.call({})  // "[object Object]"
Object.prototype.toString.call(2)  // "[object Number]"

注：這種變化可以從 IE8 和 Firefox 4 中看出區(qū)別，如下所示：

// IE8
Object.prototype.toString.call(null)  // "[object Object]"
Object.prototype.toString.call(undefined)  // "[object Object]"

// Firefox 4
Object.prototype.toString.call(null)  // "[object Null]"
Object.prototype.toString.call(undefined)  // "[object Undefined]"

測(cè)試為定義變量

typeof foo !== 'undefined'

上面代碼會(huì)檢測(cè) foo 是否已經(jīng)定義；如果沒(méi)有定義而直接使用會(huì)導(dǎo)致 ReferenceError 的異常。這是 typeof 唯一有用的地方。

結(jié)論

為了檢測(cè)一個(gè)對(duì)象的類(lèi)型，強(qiáng)烈推薦使用 Object.prototype.toString 方法；因?yàn)檫@是唯一一個(gè)可依賴(lài)的方式。正如上面表格所示，typeof 的一些返回值在標(biāo)準(zhǔn)文檔中并未定義，因此不同的引擎實(shí)現(xiàn)可能不同。

除非為了檢測(cè)一個(gè)變量是否已經(jīng)定義，我們應(yīng)盡量避免使用 typeof 操作符。

x	typeof x
undefined	"undefined"
true 或false	"boolean"
任意數(shù)字或者NaN	"number"
任意字符串	"string"
函數(shù)對(duì)象(在ECMA-262術(shù)語(yǔ)中,指的是實(shí)現(xiàn)了[[Call]] 的對(duì)象)	"function"
任意內(nèi)置對(duì)象（非函數(shù)）	"object"
數(shù)組	"obeject"
null	"object"
宿主對(duì)象(JS引擎內(nèi)置對(duì)象,而不是DOM或者其他提供的)	由編譯器各自實(shí)現(xiàn)的字符串，但不是"undefined","number","boolean","number","string"。
正則表達(dá)式	各瀏覽器表現(xiàn)不一

如果想將null和對(duì)象區(qū)分開(kāi)，則必須針對(duì)特殊值顯式檢測(cè)。如：my_value===null。對(duì)于宿主對(duì)象來(lái)說(shuō)，typeof有可能并不返回‘object',而返回字符串。但實(shí)際上客戶(hù)端js中的大多數(shù)宿主對(duì)象都是‘object'類(lèi)型。對(duì)于所有內(nèi)置可執(zhí)行對(duì)象進(jìn)行typeof運(yùn)算都將返回“function”。

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 盡管NaN是"Not-A-Number"的縮寫(xiě),意思是"不是一個(gè)數(shù)字"
typeof Number(1) === 'number'; // 不要這樣使用!
// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一個(gè)字符串
typeof String("abc") === 'string'; // 不要這樣使用!
// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // 不要這樣使用!
// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一個(gè)未定義的變量,或者一個(gè)定義了卻未賦初值的變量
// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; 
// 使用Array.isArray或者Object.prototype.toString.call方法
//可以分辨出一個(gè)數(shù)組和真實(shí)的對(duì)象
typeof new Date() === 'object';
typeof new Boolean(true) === 'object' // 令人困惑.不要這樣使用
typeof new Number(1) === 'object' // 令人困惑.不要這樣使用
typeof new String("abc") === 'object'; // 令人困惑.不要這樣使用
// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';

關(guān)于instanceof

instanceof 左操作數(shù)是一個(gè)類(lèi)，右操作數(shù)是標(biāo)識(shí)對(duì)象的類(lèi)。如果左側(cè)的對(duì)象是右側(cè)類(lèi)的實(shí)例，則返回true.而js中對(duì)象的類(lèi)是通過(guò)初始化它們的構(gòu)造函數(shù)來(lái)定義的。即instanceof的右操作數(shù)應(yīng)當(dāng)是一個(gè)函數(shù)。所有的對(duì)象都是object的實(shí)例。如果左操作數(shù)不是對(duì)象，則返回false,如果右操作數(shù)不是函數(shù)，則拋出typeError。

instanceof 運(yùn)算符是用來(lái)測(cè)試一個(gè)對(duì)象是否在其原型鏈原型構(gòu)造函數(shù)的屬性。其語(yǔ)法是object instanceof constructor

instanceof 操作符用來(lái)比較兩個(gè)操作數(shù)的構(gòu)造函數(shù)。只有在比較自定義的對(duì)象時(shí)才有意義。如果用來(lái)比較內(nèi)置類(lèi)型，將會(huì)和 typeof 操作符一樣用處不大。

比較自定義對(duì)象

function Foo() {}
function Bar() {}
Bar.prototype = new Foo();
new Bar() instanceof Bar; // true
new Bar() instanceof Foo; // true
// 如果僅僅設(shè)置 Bar.prototype 為函數(shù) Foo 本身，而不是 Foo 構(gòu)造函數(shù)的一個(gè)實(shí)例
Bar.prototype = Foo;
new Bar() instanceof Foo; // false

instanceof 比較內(nèi)置類(lèi)型

new String('foo') instanceof String; // true
new String('foo') instanceof Object; // true
'foo' instanceof String; // false
'foo' instanceof Object; // false

有一點(diǎn)需要注意，instanceof 用來(lái)比較屬于不同 JavaScript 上下文的對(duì)象（比如，瀏覽器中不同的文檔結(jié)構(gòu)）時(shí)將會(huì)出錯(cuò)，因?yàn)樗鼈兊臉?gòu)造函數(shù)不會(huì)是同一個(gè)對(duì)象。

結(jié)論:instanceof 操作符應(yīng)該僅僅用來(lái)比較來(lái)自同一個(gè) JavaScript 上下文的自定義對(duì)象。正如 typeof 操作符一樣，任何其它的用法都應(yīng)該是避免的。

function C(){} // defining a constructor
function D(){} // defining another constructor
var o = new C();
o instanceof C; // true, because: Object.getPrototypeOf(o) === C.prototype
o instanceof D; // false, because D.prototype is nowhere in o's prototype chain
o instanceof Object; // true, because:
C.prototype instanceof Object // true
C.prototype = {};
var o2 = new C();
o2 instanceof C; // true
o instanceof C; // false, because C.prototype is nowhere in o's prototype chain anymore
D.prototype = new C(); // use inheritance
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true
var myString = new String();
var myDate = new Date();
myString instanceof String; // returns true
myString instanceof Object; // returns true
myString instanceof Date;  // returns false
myDate instanceof Date;   // returns true
myDate instanceof Object;  // returns true
myDate instanceof String;  // returns false
function Car(make, model, year) {
 this.make = make;
 this.model = model;
 this.year = year;
}
var mycar = new Car("Honda", "Accord", 1998);
var a = mycar instanceof Car;  // returns true
var b = mycar instanceof Object; // returns true

總結(jié)

以上所述是小編給大家介紹的JavaScript中typeof與instanceof用法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: