2015年12月10日 星期四

JavaScript 中的 instanceof 介紹

instanceof 運算子可以用來判斷某個建構式的 prototype 屬性是否存在另外一個要檢測物件的原型鏈上。
語法

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之間的交互)

在瀏覽器中,我們的scripts可能需要在多個窗口之間進行交互。多個窗口意味著多個全域環境,不同的全域環境擁有不同的全域物件,從而擁有不同的內置類型建構式。這可能會引發一些問題。比如,表達式 [] instanceof window.frames[0].Array 會返回false,因為 Array.prototype !== window.frames[0].Array.prototype,因此你必須使用 Array.isArray(myObj) 或者 Object.prototype.toString.call(myObj) === "[object Array]"來判斷myObj是否是陣列。
Mozilla開發者注意:
在程式碼中使用 XPCOM instanceof 有特殊影響: obj instanceof xpcomInterface (e.g. Components.interfaces.nsIFile) calls obj.QueryInterface(xpcomInterface) and returns true if QueryInterface succeeded. A side effect of such call is that you can use xpcomInterface's properties on obj after a successful instanceof test. Unlike standard JavaScript globals, the test obj instanceof xpcomInterface works as expected even if obj is from a different scope.
例子
例子: 表明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

演示mycar屬於Car類型的同時又屬於Object類型

下面的程式碼新增了一個類型Car,以及該類型的物件範例mycar. instanceof運算子表明了這個mycar物件既屬於Car類型,又屬於Object類型。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var mycar = new Car("Honda", "Accord", 1998);
var a = mycar instanceof Car;    // 返回 true
var b = mycar instanceof Object; // 返回 true

沒有留言:

張貼留言