JavaScript中typeof與instanceof的區別

JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否爲空,或者是什麼類型的。但它們之間還是有區別的:
typeof
typeof 是一個一元運算,放在一個運算數之前,運算數可以是任意類型。
它返回值是一個字符串,該字符串說明運算數的類型。typeof 一般只能返回如下幾個結果:
number,boolean,string,function,object,undefined。我們可以使用 typeof 來獲取一個變量是否存在,如 if(typeof a!=”undefined”){alert(“ok”)},而不要去使用 if(a) 因爲如果 a 不存在(未聲明)則會出錯,對於 Array,Null 等特殊對象使用 typeof 一律返回 object,這正是 typeof 的侷限性。
網上的一個小例子:

instanceof
instance:實例,例子
a instanceof b?alert(“true”):alert(“false”); //a是b的實例?真:假
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) 會返回
談到 instanceof 我們要多插入一個問題,就是 function 的 arguments,我們大家也許都認爲 arguments 是一個 Array,但如果使用 instaceof 去測試會發現 arguments 不是一個 Array 對象,儘管看起來很像。
另外:
測試 var a=new Array();if (a instanceof Object) alert(‘Y’);else alert(‘N’);
得’Y’
但 if (window instanceof Object) alert(‘Y’);else alert(‘N’);
得’N’
所以,這裏的 instanceof 測試的 object 是指 js 語法中的 object,不是指 dom 模型對象。
使用 typeof 會有些區別
alert(typeof(window)) 會得 object

關於typeof

typeof一元運算符,用來返回操作數類型的字符串。

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

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 操作符的運算結果。可以看到,這個值在大多數情況下都返回 “object”。

Class 一列表示對象的內部屬性 [[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 方法被調用,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 中看出區別,如下所示:

// 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 是否已經定義;如果沒有定義而直接使用會導致 ReferenceError 的異常。 這是 typeof 唯一有用的地方。

結論

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

除非爲了檢測一個變量是否已經定義,我們應儘量避免使用 typeof 操作符。

x typeof x
undefined “undefined”
true 或false “boolean”
任意數字或者NaN “number”
任意字符串 “string”
函數對象(在ECMA-262術語中,指的是實現了[[Call]] 的對象) “function”
任意內置對象(非函數) “object”
數組 “obeject”
null “object”
宿主對象(JS引擎內置對象,而不是DOM或者其他提供的) 由編譯器各自實現的字符串,但不是”undefined”,”number”,”boolean”,”number”,”string”。
正則表達式 各瀏覽器表現不一
如果想將null和對象區分開,則必須針對特殊值顯式檢測。如:my_value===null。對於宿主對象來說,typeof有可能並不返回‘object’,而返回字符串。但實際上客戶端js中的大多數宿主對象都是‘object’類型。對於所有內置可執行對象進行typeof運算都將返回“function”。

// Numbers
typeof 37 === ‘number’;
typeof 3.14 === ‘number’;
typeof Math.LN2 === ‘number’;
typeof Infinity === ‘number’;
typeof NaN === ‘number’; // 儘管NaN是”Not-A-Number”的縮寫,意思是”不是一個數字”
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方法
//可以分辨出一個數組和真實的對象
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 左操作數是一個類,右操作數是標識對象的類。如果左側的對象是右側類的實例,則返回true.而js中對象的類是通過初始化它們的構造函數來定義的。即instanceof的右操作數應當是一個函數。所有的對象都是object的實例。如果左操作數不是對象,則返回false,如果右操作數不是函數,則拋出typeError。

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

instanceof 操作符用來比較兩個操作數的構造函數。只有在比較自定義的對象時纔有意義。 如果用來比較內置類型,將會和 typeof 操作符 一樣用處不大。

比較自定義對象

function Foo() {}
function Bar() {}
Bar.prototype = new Foo();

new Bar() instanceof Bar; // true
new Bar() instanceof Foo; // true

// 如果僅僅設置 Bar.prototype 爲函數 Foo 本身,而不是 Foo 構造函數的一個實例
Bar.prototype = Foo;
new Bar() instanceof Foo; // false

instanceof 比較內置類型

new String(‘foo’) instanceof String; // true
new String(‘foo’) instanceof Object; // true

‘foo’ instanceof String; // false
‘foo’ instanceof Object; // false

有一點需要注意,instanceof 用來比較屬於不同 JavaScript 上下文的對象(比如,瀏覽器中不同的文檔結構)時將會出錯, 因爲它們的構造函數不會是同一個對象。

結論: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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章