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之間的差異介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！