typeof與instanceof的差別

一、typeof

typeof是一個一進制運算，放在一個運算數之前，運算數可以是任意類型。

它傳回值是一個字元串，該字元串說明運算數的類型。（typeof 運算符傳回一個用來表示表達式的資料類型的字元串。 ）

typeof的傳回值類型有七種

number, boolean, string, undefined, object, function,symbol

1.number

typeof(10);
typeof(NaN);
//NaN在JavaScript中代表的是特殊非數字值,它本身是一個數字類型。
typeof(Infinity);
           

2.boolean

typeof(true);
typeof(false);
           

3.string

typeof("abc");
           

4.undefined

typeof(undefined);
typeof(a);//不存在的變量
           

5.object

對象，數組，null傳回object
typeof(null);
typeof(window);
           

6.function

typeof(Array);
typeof(Date);
           

7.symbol

typeof Symbol() // ES6提供的新的類型
           

執行個體：

// 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'; // 不要這樣使用!

// Symbols
typeof Symbol() === 'symbol';
typeof Symbol('foo') === 'symbol';
typeof Symbol.iterator === 'symbol';

// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一個未定義的變量,或者一個定義了卻未賦初值的變量

// Objects
typeof {a:1} === 'object';

// 使用Array.isArray或者Object.prototype.toString.call方法可以從基本的對象中區分出數組類型
typeof [1, 2, 4] === 'object';

typeof new Date() === 'object';

// 下面的容易令人迷惑，不要這樣使用！
typeof new Boolean(true) === 'object';
typeof new Number(1) ==== 'object';
typeof new String("abc") === 'object';

// 函數
typeof function(){} === 'function';
typeof Math.sin === 'function';
           

我們會發現一個問題，就是typeof來判斷資料類型其實并不準确。比如數組、正則、日期、對象的typeof傳回值都是object，這就會造成一些誤差。

二、instanceof

instanceof是Java、php的一個二進制操作符（運算符），由于它是由字母組成的，是以也是Java的保留關鍵字。它的作用是判斷其左邊對象是否為其右邊類的執行個體，傳回boolean類型的資料。可以用來判斷繼承中的子類的執行個體是否為父類的實作。java中的instanceof運算符是用來在運作時指出對象是否是特定類的一個執行個體。instanceof通過傳回一個布爾值來指出，這個對象是否是這個特定類或者是它的子類的一個執行個體。

執行個體：

// 定義構造函數
function C(){} 
function D(){} 

var o = new C();

// true，因為 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false，因為 D.prototype不在o的原型鍊上
o instanceof D; 

o instanceof Object; // true,因為Object.prototype.isPrototypeOf(o)傳回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype指向了一個空對象,這個空對象不在o的原型鍊上.

D.prototype = new C(); // 繼承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true
           

但是這裡我們需要注意一個問題：

function f(){ return f; }
document.write(new f() instanceof f);//false
function g(){}
document.write(new g() instanceof g);//true
           

第一個為什麼傳回false呢？因為構造函數的原型被覆寫了，我們可以看看new f和new g的差別：

轉載：

https://blog.csdn.net/mevicky/article/details/50353881?utm_source=blogxgwz0

https://blog.csdn.net/GreyBearChao/article/details/77914261