JavaScript中instanceof操作符有什么用,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
在JavaScript中,我們可以用instanceof操作符來判斷對象是否是某個類的實例,如果obj instaceof Class返回true,那么我們認為obj是Class的實例,obj要么由Class創建,要么由Class的子類創建。來自Java或其他強類型語言的開發者一定認為如果obj instaceof Class返回true,那么obj肯定擁有Class的所有屬性。事實是這樣么?我們看下面的代碼:(斑頭雁原創:http://bantouyan.iteye.com)
Js代碼
function ClassA() { this.ma = 'ClassA'; } ClassA.prototype.fa = function(){return 'prototype function';}; function ClassB() { this.mb = 'ClassB'; } ClassB.prototype = ClassA.prototype; var obja = new ClassA(); alert(('ma' in obja) + ' ' + obja.hasOwnProperty('ma')); //output true true alert(('mb' in obja) + ' ' + obja.hasOwnProperty('mb')); //output false false alert(('fa' in obja) + ' ' + obja.hasOwnProperty('fa')); //output true false alert(('fb' in obja) + ' ' + obja.hasOwnProperty('fb')); //output true false alert(obja instanceof ClassA); //output true alert(obja instanceof ClassB); //output true var objb = new ClassB(); alert(('ma' in objb) + ' ' + objb.hasOwnProperty('ma')); //output false false alert(('mb' in objb) + ' ' + objb.hasOwnProperty('mb')); //output true true alert(('fa' in objb) + ' ' + objb.hasOwnProperty('fa')); //output true false alert(('fb' in objb) + ' ' + objb.hasOwnProperty('fb')); //output true false alert(objb instanceof ClassA); //output true alert(objb instanceof ClassB); //output true
在這段代碼中,我們定義了兩個類,ClassA與ClassB,還給ClassA創建了原型方法fa,給ClassB創建了原型方法fb,并分別創建了對象obja與objb。直覺上,我們并不認為ClassA與ClassB是同一個類,所以obja不是ClassB的實例,objb也不是ClassA的實例,而且obja不會擁有屬性fb,objb也不會擁有屬性fa,但是運行結果告訴我們,JavaScript并不這樣認為。obja與objb都擁有屬性fa與fb,它們既是ClassA的實例也是ClassB的實例。下面我們分析一下原因。(斑頭雁原創:http://bantouyan.iteye.com)
ClassA的prototype與ClassB的prototype是同一個對象,所以給ClassA增加原型方法fa會影響到ClassB,給ClassB增加的原型方法fb也會影響到ClassA,所以obja與objb都擁有屬性fa與fb,這一點也比較容易理解。oba沒有ClassB的實例屬性mb但卻是ClassB的實例,objb也沒有ClassA的實例屬性ma但卻是ClassA的實例,這說明instanceof的判斷與實例屬性無關。既然instanceof與實例屬性無關,那么它就跟原型屬性有關。事實上,JavaScript根據原型判定instanceof的運算結果。(斑頭雁原創:http://bantouyan.iteye.com)
我們知道同一個構造函數所創建的對象與這個構造函數共享同一個原型(只不一般不能直接訪問過對象的原型),而ClassA與ClassB也共享同一個原型,那么obja與objb也共享同一個原型,所以可以這樣認為,如果對象與類共享一個原型,那么對象就是這個類的實例,instanceof運算就返回true。下面我們看一下繼承的情況。(斑頭雁原創:http://bantouyan.iteye.com)
Js代碼
function ClassA() { this.ma = 'ClassA'; } ClassA.prototype.fa = function(){return 'prototype function fa';}; function ClassB() { this.mb = 'ClassB'; } ClassB.prototype = ClassA.prototype; ClassB.prototype.fb = function(){return 'prototype function fb';}; function ClassC() { this.mc = 'ClassC'; } ClassC.prototype = new ClassB(); ClassC.prototype.fc = function(){return 'prototype function fc';}; var objc = new ClassC(); alert(objc instanceof ClassB); //output true alert(objc instanceof ClassA); //output true alert(('ma' in objc) + ' ' + objc.hasOwnProperty('ma')); //output false false alert(('mb' in objc) + ' ' + objc.hasOwnProperty('mb')); //output true false alert(('mc' in objc) + ' ' + objc.hasOwnProperty('mc')); //output true true alert(('fa' in objc) + ' ' + objc.hasOwnProperty('fa')); //output true false alert(('fb' in objc) + ' ' + objc.hasOwnProperty('fb')); //output true false alert(('fc' in objc) + ' ' + objc.hasOwnProperty('fc')); //output true false
ClassC采用原型鏈方法繼承了ClassB,所以ClassC的對象objc是ClassB的實例,但是運行結果告訴我們,objc也是ClassA的實例。objc是ClassC的實例,所以objc與ClassC共享一個原型。ClassC的原型是ClassB的實例,所以ClassC的原型的原型與ClassB的原型是同一個原型,而ClassB與ClassA共享同一個原型,所以ClassC的原型的原型與ClassA的原型是同一個原型,即objc的原型的原型與ClassA的原型是同一個原型。由此看來,instanceof可以根據對象原型的原型,即原型鏈上的原型,判定運算的結果,即如果類的原型與對象原型鏈上的某一個原型是同一個對象,那么instanceof運算將返回true,否則返回false。下面我們用一段更長的代碼來驗證這個結論。(斑頭雁原創:http://bantouyan.iteye.com)
Js代碼
function ClassA() { this.ma = 'ClassA'; } ClassA.prototype.fa = function(){return 'prototype function fa';}; function ClassB() { this.mb = 'ClassB'; } ClassB.prototype = ClassA.prototype; ClassB.prototype.fb = function(){return 'prototype function fb';}; function ClassC() { this.mc = 'ClassC'; } ClassC.prototype = new ClassB(); ClassC.prototype.fc = function(){return 'prototype function fc';}; function ClassD() { this.md = 'ClassD'; } ClassD.prototype = ClassC.prototype; ClassC.prototype.fd = function(){return 'prototype function fd';}; function ClassE() { this.me = 'ClassE'; } ClassE.prototype = new ClassD(); ClassE.prototype.fe = function(){return 'prototype function fe';}; var obje = new ClassE(); alert(obje instanceof ClassA); //output true alert(obje instanceof ClassB); //output true alert(obje instanceof ClassC); //output true alert(obje instanceof ClassD); //output true alert(obje instanceof ClassE); //output true alert(('ma' in obje) + ' ' + obje.hasOwnProperty('ma')); //output false false alert(('mb' in obje) + ' ' + obje.hasOwnProperty('mb')); //output true false alert(('mc' in obje) + ' ' + obje.hasOwnProperty('mc')); //output false false alert(('md' in obje) + ' ' + obje.hasOwnProperty('md')); //output true false alert(('me' in obje) + ' ' + obje.hasOwnProperty('me')); //output true true alert(('fa' in obje) + ' ' + obje.hasOwnProperty('fa')); //output true false alert(('fb' in obje) + ' ' + obje.hasOwnProperty('fb')); //output true false alert(('fc' in obje) + ' ' + obje.hasOwnProperty('fc')); //output true false alert(('fd' in obje) + ' ' + obje.hasOwnProperty('fd')); //output true false alert(('fe' in obje) + ' ' + obje.hasOwnProperty('fe')); //output true false
ClassA的原型與ClassB的原型共享同一個對象,ClassC的原型與ClassD的原型也共享一個對象,而ClassC是ClassB的子類,ClassE是ClassD的子類,而obje是ClassE的實例。所以obje的原型鏈的***個原型是ClassE的原型,它是ClassD的實例,故第二個原型是ClassD的原型,也就是ClassC的原型,ClassC的原型是ClassB的實例,所以原型鏈上第三個原型是ClassB的原型,也就是ClassA的原型。所以,ClassA、ClassB、ClassC、ClassD與ClassE的原型都在對象obje的原型鏈上,所以obje是這些類的實例。這也驗證了前面的結論,即如果類的原型與對象原型鏈上的某一個原型是同一個對象,那么instanceof運算將返回true。雖然obje是ClassA、ClassC的實例,但是它并沒有ClassA的實例屬性ma,ClassC的實例屬性mc。
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。