解析JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true
更新時(shí)間：2013年12月03日 09:37:51 作者：
這篇文章主要是對(duì)JavaScript中instanceof對(duì)于不同的構(gòu)造器或許都返回true進(jìn)行了詳細(xì)的解析，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
我們知道 instanceof 運(yùn)算符用來檢查對(duì)象是否為某構(gòu)造器的實(shí)例。下面列舉它返回true的各種情景。
1、對(duì)象obj是通過new Constructor創(chuàng)建的，那么 obj instanceof Constructor 為true
復(fù)制代碼 代碼如下:
function Person(n, a) {
this.name = n;
this.age = a;
}
var p = new Person('John Backus', 82);
console.log(p instanceof Person); // true
2、如果存在繼承關(guān)系，那么 子類實(shí)例 instanceof 父類 也會(huì)返回true
復(fù)制代碼 代碼如下:
function A(){}
function B(){}
B.prototype = new A(); // B繼承于A
var b = new B();
console.log(b instanceof A); // true
3、由于Object是根類，所有其它自定義類都繼承于它，因此 任意構(gòu)造器的實(shí)例 instanceof Object 都返回true
復(fù)制代碼 代碼如下:
function A() {}
var a = new A();
console.log(a instanceof Object); // true
var str = new String('hello');
console.log(str instanceof Object); // true
var num = new Number(1);
console.log(num instanceof Object); // true
甚至包括構(gòu)造器自身
復(fù)制代碼 代碼如下:
function A() {}
console.log(A instanceof Object); // true
console.log(String instanceof Object); // true
console.log(Number instanceof Object); // true
4、所有構(gòu)造器 instanceof Function 返回true
復(fù)制代碼 代碼如下:
function A() {}
console.log(A instanceof Function); // true
console.log(String instanceof Function); // true
console.log(Number instanceof Function); // true
以上四點(diǎn)總結(jié)為一句話：如果某實(shí)例是通過某類或其子類的創(chuàng)建的，那么instanceof就返回true。或者說某構(gòu)造函數(shù)的原型 存在與對(duì)象obj的內(nèi)部原型鏈上，那么返回true。即instanceof的結(jié)果與構(gòu)造器自身并無直接關(guān)系。這在許多語言中都是通用的。
Java中定義了一個(gè)類Person，實(shí)例p對(duì)于Person和Object都返回true
復(fù)制代碼 代碼如下:
class Person {
public String name;
public int age;
Person (String n, int a) {
this.name = name;
this.age = a;
}
public static void main(String[] args) {
Person p = new Person("John Backus", 82);
System.out.println(p instanceof Person); // true
System.out.println(p instanceof Object); // true
}
}
Java中如果存在繼承關(guān)系，那么 子類實(shí)例 instanceof 父類 也返回true
復(fù)制代碼 代碼如下:
// 父類
class Person {
public String name;
public int age;
Person (String n, int a) {
name = name;
age = a;
}
}
// 子類
public class Man extends Person{
public String university;
Man(String n, int a, String s) {
super(n, a);
university = s;
}
public static void main(String[] args) {
Man mm = new Man("John Resig", 29, "PKU");
System.out.println(mm instanceof Man); // true
System.out.println(mm instanceof Person); // 也是true
}
}
知道了這些，JS中以下的表現(xiàn)就不奇怪了
復(fù)制代碼 代碼如下:
// 定義兩個(gè)構(gòu)造器
function A(){}
function B(){}
A.prototype = B.prototype = {a: 1};
// 分別創(chuàng)建兩個(gè)不同構(gòu)造器的實(shí)例
var a = new A();
var b = new B();
console.log(a instanceof B); // true
console.log(b instanceof A); // true
我們看到a, b分別是用A和B創(chuàng)建的，但a instanceof B和 b instanceof A都是true。即a雖然不是用構(gòu)造器B創(chuàng)建的，但仍然返回true。因?yàn)锽.prototype存在于a的內(nèi)部原型鏈上。
由于JS的動(dòng)態(tài)語言特性，可以在運(yùn)行時(shí)修改原型，因此下面返回false也不足為奇了。因?yàn)锳.prototype已經(jīng)不在a的內(nèi)部原型鏈中，鏈條被打斷了。
復(fù)制代碼 代碼如下:
function A(){}
var a = new A();
A.prototype = {}; // 動(dòng)態(tài)修改原型，注意必須在創(chuàng)建a后
console.log(a instanceof A); // false
注意這么寫也打破了上面總結(jié)的第一條：對(duì)象obj是通過new Constructor創(chuàng)建的，那么obj instanceof Constructor 為true
實(shí)際在ECMAScript標(biāo)準(zhǔn)中（以5.1為準(zhǔn)），instanceof 內(nèi)部實(shí)現(xiàn)會(huì)調(diào)用構(gòu)造器的內(nèi)部方法[[HasInstance]]，描述如下
假如F是一個(gè)函數(shù)對(duì)象，當(dāng)F(V)執(zhí)行時(shí)，以下步驟將發(fā)生：
1、如果instanceof左運(yùn)算元V不是對(duì)象類型，直接返回false
復(fù)制代碼 代碼如下:
var a, b = 1, c = true, d = 'hello';
console.log(a instanceof Object); // false 這里a值為undefined
console.log(b instanceof Object); // false
console.log(c instanceof Object); // false
console.log(d instanceof Object); // false
2/3、取構(gòu)造器F的prototype屬性，如果不是對(duì)象類型，須拋出TypeError異常，
復(fù)制代碼 代碼如下:
function A(){}
A.prototype = 1; // A的prototype設(shè)為非對(duì)象類型
var a = new A();
console.log(a instanceof A);
各瀏覽器拋出的異常提示不同，
Firefox18：
Chrome24:
Safari6:
Opera12:
IE10：
4、不斷的執(zhí)行以下邏輯：將V設(shè)為內(nèi)部原型的V，如果V是null則返回false，如果V和O都指向同一個(gè)對(duì)象，則返回true。
您可能感興趣的文章:
- 關(guān)于javascript中的typeof和instanceof介紹
- JavaScript中instanceof運(yùn)算符的用法總結(jié)
- javascript之typeof、instanceof操作符使用探討
- JavaScript instanceof 的使用方法示例介紹
- 談?wù)勎覍?duì)JavaScript中typeof和instanceof的深入理解
- JavaScript類型檢測(cè)之typeof 和 instanceof 的缺陷與優(yōu)化
- 淺談javascript中的instanceof和typeof
- JavaScript必知必會(huì)(六) delete in instanceof
- JavaScript中instanceof運(yùn)算符的使用示例
- 實(shí)例講解JavaScript中instanceof運(yùn)算符的用法
- JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程
相關(guān)文章
這篇文章主要介紹了JS輸入框模糊匹配查詢功能，主要是仿百度搜索自動(dòng)提示框的功能，大家參考使用吧2013-11-11
js簡單的點(diǎn)擊返回頂部效果實(shí)現(xiàn)方法
這篇文章主要介紹了js簡單的點(diǎn)擊返回頂部效果實(shí)現(xiàn)方法,實(shí)例分析了實(shí)現(xiàn)返回頂部效果的相關(guān)要點(diǎn)與實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-04-04
JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義
本文主要介紹了JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Bootstrap媒體對(duì)象學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap媒體對(duì)象的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
關(guān)掉開發(fā)者工具之后，在狀態(tài)欄發(fā)現(xiàn)提示'console' 未定義,為什么之前的運(yùn)行沒有問題，之后的就不行呢2014-03-03
微信小程序地圖(map)組件點(diǎn)擊(tap)獲取經(jīng)緯度的方法
這篇文章主要介紹了微信小程序地圖(map)組件點(diǎn)擊(tap)獲取經(jīng)緯度的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
如何在JavaScript中使用localStorage詳情
這篇文章主要介紹了如何在JavaScript中使用localStorage，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
js實(shí)現(xiàn)iframe跨頁面調(diào)用函數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)iframe跨頁面調(diào)用函數(shù)的方法,實(shí)例展示了iframe中父頁面調(diào)用子頁面和子頁面調(diào)用父頁面的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
JavaScript原型對(duì)象原理與應(yīng)用分析
這篇文章主要介紹了JavaScript原型對(duì)象原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript原型對(duì)象的概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
EasyUI彈出框行編輯如何通過下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng)
本文介紹了如何使用EasyUI彈出框和下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng),并詳細(xì)描述了當(dāng)用戶選擇下拉框時(shí)如何更新當(dāng)前行數(shù)據(jù),通過解決datagrid的onClickRow和onClickCell事件不觸發(fā)的問題,實(shí)現(xiàn)了下拉框選擇后數(shù)據(jù)的自動(dòng)填充2024-11-11