JavaScript中isPrototypeOf、instanceof和hasOwnProperty函數(shù)的用法詳解
isPrototypeOf
作用:檢測(cè)一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型?;蛘哒f一個(gè)對(duì)象是否被包含在另一個(gè)對(duì)象的原型鏈中
var p = {x:1};//定義一個(gè)原型對(duì)象 var o = Object.create(p);//使用這個(gè)原型創(chuàng)建一個(gè)對(duì)象 p.isPrototypeOf(o);//=>true:o繼承p Object.prototype.isPrototypeOf(p);//=> true p繼承自O(shè)bject.prototype
以上實(shí)例來自與《JavaScript權(quán)威指南》,簡(jiǎn)單解釋一下就是每一個(gè)JavaScript
對(duì)象都和原型關(guān)聯(lián),每一個(gè)對(duì)象都從原型繼承屬性。所有通過對(duì)象直接量創(chuàng)建的對(duì)象都使用Object.prototype
作為他們的原型,因此p
是繼承自Object.prototype
,因此在p
的原型鏈中一定存在Object.prototype
。
上面還提到了Object.create();
該方法創(chuàng)建一個(gè)新對(duì)象,第一個(gè)參數(shù)是這個(gè)對(duì)象的原型,所以上面創(chuàng)建的o
對(duì)象它的原型就是p
;
function Animal(){ this.species = "動(dòng)物"; }; var eh = new Animal(); Animal.prototype.isPrototypeOf(eh)//=>true
以上實(shí)例是通過new
創(chuàng)建了對(duì)象eh
,使用構(gòu)造函數(shù)Animal
的prototype
作為它的原型。
綜合上面的兩個(gè)例子,我們發(fā)現(xiàn)在調(diào)用isPrototypeOf()
的時(shí)候有三種方式
p.isPrototypeOf(o);//=>true Object.prototype.isPrototypeOf(p); Animal.prototype.isPrototypeOf(eh)//=>true
總結(jié)一下就是:
通過Object.create()
創(chuàng)建的對(duì)象使用第一個(gè)參數(shù)作為原型
通過對(duì)象直接量的對(duì)象使用Object.prototype
作為原型
通過new
創(chuàng)建的對(duì)象使用構(gòu)造函數(shù)的prototype
屬性作為原型
instanceof
instanceof運(yùn)算符希望左操作數(shù)是一個(gè)對(duì)象,右操作數(shù)標(biāo)識(shí)對(duì)象的類。如果左側(cè)對(duì)象是右側(cè)類的實(shí)例,則表達(dá)式返回為true,否則返回false。
var d = new Date(); d instanceof Date;//=>true d是Date的實(shí)例 d instanceof Object;//=>true 所有對(duì)象都是Object的實(shí)例
當(dāng)通過instanceof判斷一個(gè)對(duì)象是否是一個(gè)類的實(shí)例的時(shí)候,這個(gè)判斷也會(huì)包含對(duì)父類的檢測(cè)。盡管instanceof的右操作數(shù)是構(gòu)造函數(shù),但計(jì)算過程實(shí)際是檢測(cè)了對(duì)象的繼承關(guān)系。
instanceOf與isPrototypeOf簡(jiǎn)單總結(jié)
var d = new Date(); Date.prototype.isPrototypeOf(d);//=>true d instanceof Date;//=>true
- 如果Date.prototype是d的原型,那么d一定是Date的實(shí)例。
- 缺點(diǎn)為無法同對(duì)象來獲得類型,只能檢測(cè)對(duì)象是否屬于類名
- 在多窗口和多框架的子頁面的web應(yīng)用中兼容性不佳。其中一個(gè)典型代表就是instanceof操作符不能視為一個(gè)可靠的數(shù)組檢測(cè)方法。
hasOwnProperty
檢測(cè)集合成員的所屬關(guān)系,判斷某個(gè)屬性是否存在于某個(gè)對(duì)象中??梢酝ㄟ^in運(yùn)算符,hasOwnProperty()來完成。
in
運(yùn)算符左側(cè)是屬性名,右側(cè)是字符串,如果對(duì)象的自由屬性或者繼承屬性中包含這個(gè)屬性則返回true
。
對(duì)象的hasOwnProperty()
方法用來檢測(cè)給定的名字是否是對(duì)象的自由屬性,如果是繼承屬性則返回false。
function Animal(){}//定義Animal構(gòu)造函數(shù) Animal.prototype = {//定義Animal原型 species:"動(dòng)物", say:function(){ console.log('i can say word'); } } function Cat(name,color){//定義構(gòu)造函數(shù)Cat this.name = name; this.color = color; } var F = function(){}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat;//Cat繼承Animal 用F空對(duì)象作為媒介 var eh = new Cat('lili','white');//實(shí)例化對(duì)象 console.log('say' in eh)//=>true console.log('name' in eh)//=>true console.log('color' in eh)//=>true console.log('species' in eh)=>true console.log(eh.hasOwnProperty('say'))=>false 由于say為繼承屬性 非自有屬性 console.log(eh.hasOwnProperty('species'))=>false 由于species為繼承屬性 非自有屬性 console.log(eh.hasOwnProperty('name'))=>true console.log(eh.hasOwnProperty('color'))=>true for(var key in eh){ console.log(key); if(eh.hasOwnProperty(key)){ console.log(key) //=>species say name color } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript字符串對(duì)象的concat方法實(shí)例(用于連接兩個(gè)或多個(gè)字符串)
這篇文章主要介紹了JavaScript字符串對(duì)象的concat方法實(shí)例,這個(gè)方法用于連接兩個(gè)或多個(gè)字符串,平時(shí)用+號(hào)比較多,所以這個(gè)方法可能不太常用,需要的朋友可以參考下2014-10-10js對(duì)象內(nèi)部訪問this修飾的成員函數(shù)示例
這篇文章主要介紹了js對(duì)象內(nèi)部訪問this修飾的成員函數(shù)示例,需要的朋友可以參考下2014-04-04IE6瀏覽器下resize事件被執(zhí)行了多次解決方法
在IE瀏覽器下,一次resize事件被執(zhí)行了多次,這是IE6和IE7的一個(gè)比較廣為認(rèn)知的問題,這個(gè)問題在這兩個(gè)版本的瀏覽器中表現(xiàn)有所不同,通常IE6下會(huì)比IE7下更為糟糕,接下來將介紹解決方法,需要的朋友可以參考下2012-12-12一起來學(xué)習(xí)一下JavaScript的事件流
這篇文章主要為大家詳細(xì)介紹了JavaScript的事件流,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01