腳本之家服務器常用軟件

快捷導航

詳解JavaScript中typeof與instanceof用法

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

typeof用以獲取一個變量或者表達式的類型而instanceof用于判斷一個變量是否某個對象的實例，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧

今天寫JS代碼，遇到動態(tài)生成多個名稱相同的input復選按鈕

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

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

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

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

如：

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

我們可以使用typeof來獲取一個變量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)因為如果a不存在（未聲明）則會出錯，

正因為typeof遇到null,數(shù)組,對象時都會返回object類型，所以當我們要判斷一個對象是否是數(shù)組時

或者判斷某個變量是否是某個對象的實例則要選擇使用另一個關鍵語法instanceof

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

同時alert(a instanceof Object)也會返回true;這是因為Array是object的子類。

再如：function test(){};var a=new test();alert(a instanceof test)會返回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>

關于typeof

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

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

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 操作符的運算結(jié)果?？梢钥吹剑@個值在大多數(shù)情況下都返回 "object"。

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

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

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

對象的類定義

JavaScript 標準文檔只給出了一種獲取 [[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 被設置為了需要獲取 [[Class]] 值的對象。

注：Object.prototype.toString 返回一種標準格式字符串，所以上例可以通過 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]"

測試為定義變量

typeof foo !== 'undefined'

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

結(jié)論

為了檢測一個對象的類型，強烈推薦使用 Object.prototype.toString 方法；因為這是唯一一個可依賴的方式。正如上面表格所示，typeof 的一些返回值在標準文檔中并未定義，因此不同的引擎實現(xiàn)可能不同。

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

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

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

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

關于instanceof

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

instanceof 運算符是用來測試一個對象是否在其原型鏈原型構(gòu)造函數(shù)的屬性。其語法是object instanceof constructor

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

比較自定義對象

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

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

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

有一點需要注意，instanceof 用來比較屬于不同 JavaScript 上下文的對象（比如，瀏覽器中不同的文檔結(jié)構(gòu)）時將會出錯，因為它們的構(gòu)造函數(shù)不會是同一個對象。

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

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用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: