DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript的instanceof運算符學習教程
JavaScript的instanceof運算符學習教程
編輯:JavaScript基礎知識     

語法

object instanceof constructor

參數
object:
要檢測的對象.
constructor:
某個構造函數

描述:
instanceof 運算符用來檢測 constructor.prototype 是否存在於參數 object 的原型鏈上。

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

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

instanceof和多全局對象(多個frame或多個window之間的交互)

在浏覽器中,我們的腳本可能需要在多個窗口之間進行交互。多個窗口意味著多個全局環境,不同的全局環境擁有不同的全局對象,從而擁有不同的內置類型構造函數。這可能會引發一些問題。比如,表達式 [] instanceof window.frames[0].Array 會返回false,因為 Array.prototype !== window.frames[0].Array.prototype,因此你必須使用 Array.isArray(myObj) 或者 Object.prototype.toString.call(myObj) === "[object Array]"來判斷myObj是否是數組。

示例
instanceof的常規用法是判斷a是否是b類型:

console.log(true instanceof Boolean); // false 
console.log(new Number(1) instanceof Number); // true

instanceof還能判斷父類型:

function Father() {}
function Child() {}
Child.prototype = new Father();
var a = new Child();
console.log(a instanceof Child); // true
console.log(a instanceof Father); // true

Child構造函數繼承自Father,實例a是Child構造的無疑,但是為何也是Father的實例呢?其實instanceof運算符的內核可以簡單地用以下代碼描述:

function check(a, b) {
 while(a.__proto__) {
  if(a.__proto__ === b.prototype)
   return true;
  a = a.__proto__;
 }
 return false;
}

function Foo() {}
console.log(Object instanceof Object === check(Object, Object)); // true 
console.log(Function instanceof Function === check(Function, Function)); // true 
console.log(Number instanceof Number === check(Number, Number)); // true 
console.log(String instanceof String === check(String, String)); // true 
console.log(Function instanceof Object === check(Function, Object)); // true 
console.log(Foo instanceof Function === check(Foo, Function)); // true 
console.log(Foo instanceof Foo === check(Foo, Foo)); // true

簡單地說,a如果是b的實例,那麼a肯定能使用b的prototype中定義的方法和屬性,那麼用代碼表示就是a的原型鏈中有b.prototype取值相同的對象,於是順著a的原型鏈一層層找就行了。

另外值得注意的是,String Number Boolean 以及Function等都是函數,而函數則是統一由Function構造而來的,so它們和任何單純的函數一樣,能用Function上的原型屬性:

Function.prototype.a = 10;
console.log(String.a); // 10

最後來簡單講講最開始的兩道題吧。

 // 為了方便表述,首先區分左側表達式和右側表達式
 FunctionL = Function, FunctionR = Function; 
 // 下面根據規范逐步推演
 O = FunctionR.prototype = Function.prototype 
 L = FunctionL.__proto__ = Function.prototype 
 // 第一次判斷
 O == L 
 // 返回 true

// 為了方便表述,首先區分左側表達式和右側表達式
 StringL = String, StringR = String; 
 // 下面根據規范逐步推演
 O = StringR.prototype = String.prototype 
 L = StringL.__proto__ = Function.prototype 
 // 第一次判斷
 O != L
 // 循環再次查找 L 是否還有 __proto__ 
 L = String.prototype.__proto__ = Object.prototype 
 // 第二次判斷
 O != L 
 // 再次循環查找 L 是否還有 __proto__ 
 L = String.prototype.__proto__ = null 
 // 第三次判斷
 L == null 
 // 返回 false

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved