JavaScript的instanceof運算符學習教程

文法

object instanceof constructor

參數

object：

要檢測的對象.

constructor：

某個構造函數

描述：

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

 // 定義構造函數function C(){} function D(){} var o = new C();// true，因為Object.getPrototypeOf(o) === C.prototypeo instanceof C; // false，因為D.prototype不在o的原型鏈上o instanceof D; o instanceof Object; // true,因為Object.prototype.isPrototypeOf(o)返回trueC.prototype instanceof Object // true,同上C.prototype = {};var o2 = new C();o2 instanceof C; // trueo instanceof C; // false,C.prototype指向了一個空對象,這個空對像不在o的原型鏈上.D.prototype = new C(); // 繼承var o3 = new D();o3 instanceof D; // trueo3 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); // trueconsole.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