快捷導(dǎo)航

JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程

更新時(shí)間：2016年06月08日 18:45:03 作者：韓子遲

instanceof運(yùn)算符可以用來(lái)判斷某個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象是否存在于另外一個(gè)要檢測(cè)對(duì)象的原型鏈上,這里我們就來(lái)看一下JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程

語(yǔ)法

object instanceof constructor

參數(shù)
object：
要檢測(cè)的對(duì)象.
constructor：
某個(gè)構(gòu)造函數(shù)

描述：
instanceof 運(yùn)算符用來(lái)檢測(cè) constructor.prototype 是否存在于參數(shù) object 的原型鏈上。

// 定義構(gòu)造函數(shù)
function C(){} 
function D(){} 

var o = new C();

// true，因?yàn)?Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false，因?yàn)?D.prototype不在o的原型鏈上
o instanceof D; 

o instanceof Object; // true,因?yàn)镺bject.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指向了一個(gè)空對(duì)象,這個(gè)空對(duì)象不在o的原型鏈上.

D.prototype = new C(); // 繼承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

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

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

在瀏覽器中，我們的腳本可能需要在多個(gè)窗口之間進(jìn)行交互。多個(gè)窗口意味著多個(gè)全局環(huán)境，不同的全局環(huán)境擁有不同的全局對(duì)象，從而擁有不同的內(nèi)置類型構(gòu)造函數(shù)。這可能會(huì)引發(fā)一些問(wèn)題。比如，表達(dá)式 [] instanceof window.frames[0].Array 會(huì)返回false，因?yàn)?Array.prototype !== window.frames[0].Array.prototype，因此你必須使用 Array.isArray(myObj) 或者 Object.prototype.toString.call(myObj) === "[object Array]"來(lái)判斷myObj是否是數(shù)組。

示例
instanceof的常規(guī)用法是判斷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構(gòu)造函數(shù)繼承自Father，實(shí)例a是Child構(gòu)造的無(wú)疑，但是為何也是Father的實(shí)例呢？其實(shí)instanceof運(yùn)算符的內(nèi)核可以簡(jiǎn)單地用以下代碼描述：

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

簡(jiǎn)單地說(shuō)，a如果是b的實(shí)例，那么a肯定能使用b的prototype中定義的方法和屬性，那么用代碼表示就是a的原型鏈中有b.prototype取值相同的對(duì)象，于是順著a的原型鏈一層層找就行了。

另外值得注意的是，String Number Boolean 以及Function等都是函數(shù)，而函數(shù)則是統(tǒng)一由Function構(gòu)造而來(lái)的，so它們和任何單純的函數(shù)一樣，能用Function上的原型屬性：

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

最后來(lái)簡(jiǎn)單講講最開始的兩道題吧。

 // 為了方便表述，首先區(qū)分左側(cè)表達(dá)式和右側(cè)表達(dá)式
 FunctionL = Function, FunctionR = Function; 
 // 下面根據(jù)規(guī)范逐步推演
 O = FunctionR.prototype = Function.prototype 
 L = FunctionL.__proto__ = Function.prototype 
 // 第一次判斷
 O == L 
 // 返回 true

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

您可能感興趣的文章: