JavaScript中typeof與instanceof之間的區別是什么

小編給大家分享一下JavaScript中typeof與instanceof之間的區別是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

                                                           本篇文章給大家帶來的內容是關于JavaScript中typeof與instanceof之間的區別介紹（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

JavaScript 中typeof 和 instanceof 常用來判斷一個變量是否為空，或者是什么類型的。但它們之間還是有區別的：

typeof

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

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

typeof其實就是判斷參數是什么類型的實例，就一個參數

typeof 一般只能返回如下幾個結果："number"、"string"、"boolean"、"object"、"function" 和 "undefined"。

運算數為數字 typeof(x) = "number"

字符串 typeof(x) = "string"

布爾值 typeof(x) = "boolean"

對象,數組和null typeof(x) = "object"

函數 typeof(x) = "function"

console.log(typeof (123));//typeof(123)返回"number" 
console.log(typeof ("123"));//typeof("123")返回"string"
var param1 = "string";
var param2 = new Object();
var param3 = 10;
console.log(typeof(param1)+"\n"+typeof(param2)+"\n"+typeof(param3)); 
　　　　　//　string object  number

我們可以使用 typeof 來獲取一個變量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因為如果 a 不存在（未聲明）則會出錯，對于 Array,Null 等特殊對象使用 typeof 一律返回 object，這正是 typeof 的局限性。

經常會在js里用到數組,比如 多個名字相同的input, 若是動態生成的, 提交時就需要判斷其是否是數組.

    if(document.mylist.length != "undefined" ) {} //這個用法有誤.
    正確的是 `if( typeof(document.mylist.length) != "undefined" ) {}` 

     或 `if( !isNaN(document.mylist.length) ) {}`

typeof的運算數未定義,返回的就是 "undefined".

在 JavaScript 中，判斷一個變量的類型嘗嘗會用 typeof 運算符，在使用 typeof 運算符時采用引用類型存儲值會出現一個問題，無論引用的是什么類型的對象，它都返回 “object”。這就需要用到instanceof來檢測某個對象是不是另一個對象的實例。

instanceof

instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。

語法：object instanceof constructor
參數：object（要檢測的對象.）constructor（某個構造函數）
描述：instanceof 運算符用來檢測 constructor.prototype 是否存在于參數 object 的原型鏈上。

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) 會返回true

alert(a==b);  //flase

案例：

另外，更重的一點是 `instanceof` 可以在繼承關系中用來判斷一個實例是否屬于它的父類型。

例如：

function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型繼承 
var foo = new Foo(); 
console.log(foo instanceof Foo)//true 
console.log(foo instanceof Aoo)//true

上面的代碼中是判斷了一層繼承關系中的父類，在多層繼承關系中，instanceof 運算符同樣適用。


又如：

console.log(Object instanceof Object);//true 
console.log(Function instanceof Function);//true 
console.log(Number instanceof Number);//false 
console.log(String instanceof String);//false  
console.log(Function instanceof Object);//true  
console.log(Foo instanceof Function);//true 
console.log(Foo instanceof Foo);//false

// 定義構造函數
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

談到 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

需要注意的是，如果表達式 obj instanceof Foo 返回true，則并不意味著該表達式會永遠返回ture，因為Foo.prototype屬性的值有可能會改變，改變之后的值很有可能不存在于obj的原型鏈上，這時原表達式的值就會成為false。另外一種情況下，原表達式的值也會改變，就是改變對象obj的原型鏈的情況，雖然在目前的ES規范中，我們只能讀取對象的原型而不能改變它，但借助于非標準的__proto__魔法屬性，是可以實現的。比如執行obj.__proto__ = {}之后，obj instanceof Foo就會返回false了。

例子: 表明String對象和Date對象都屬于Object類型
下面的代碼使用了instanceof來證明：String和Date對象同時也屬于Object類型。

例子: 表明String對象和Date對象都屬于Object類型

下面的代碼使用了instanceof來證明：String和Date對象同時也屬于Object類型。
var simpleStr = "This is a simple string"; 
var myString  = new String();
var newStr    = new String("String created with constructor");
var myDate    = new Date();
var myObj     = {};

simpleStr instanceof String; // returns false, 檢查原型鏈會找到 undefined
myString  instanceof String; // returns true
newStr    instanceof String; // returns true
myString  instanceof Object; // returns true

myObj instanceof Object;    // returns true, despite an undefined prototype
({})  instanceof Object;    // returns true, 同上

myString instanceof Date;   // returns false

myDate instanceof Date;     // returns true
myDate instanceof Object;   // returns true
myDate instanceof String;   // returns false

看完了這篇文章，相信你對JavaScript中typeof與instanceof之間的區別是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！