JS中的hasOwnProperty()和isPrototypeOf()屬性實(shí)例詳解
這兩個(gè)屬性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf()
先講解hasOwnProperty()方法和使用。在講解isPropertyOf()方法和使用
看懂這些至少要懂原型鏈
一、Object.prototype.hasOwnProperty()
概述
hasOwnProperty()方法用來(lái)判斷某個(gè)對(duì)象是否含有指定的自身屬性
語(yǔ)法
obj.hasOwnProperty("屬性名");//實(shí)例obj是否包含有圓括號(hào)中的屬性,是則返回true,否則是false
描述
所有繼承了Object.prototype的對(duì)象都會(huì)從原型鏈上繼承到hasOwnProperty方法,這個(gè)方法檢測(cè)一個(gè)對(duì)象是否包含一個(gè)特定的屬性,和in不同,這個(gè)方法會(huì)忽略那些從原型鏈上繼承的屬性。
實(shí)例
1.使用hasOwnProperty()方法判斷某對(duì)象是否含有特定的自身屬性
下面的例子檢測(cè)了對(duì)象 o 是否含有自身屬性 prop:
var o =new Object();
o.prop="exists";
function change(){
o.newprop=o.prop;
delete o.prop;
}
o.hasOwnProperty("prop")//true
change()//刪除o的prop屬性
o.hasOwnProperty("prop")//false
//刪除后在使用hasOwnProperty()來(lái)判斷是否存在,返回已不存在了
2.自身屬性和繼承屬性的區(qū)別
下面的列子演示了hasOwnProperty()方法對(duì)待自身屬性和繼承屬性的區(qū)別。
var o =new Object();
o.prop="exists";
o.hasOwnProperty("prop");//true 自身的屬性
o.hasOwnProperty("toString");//false 繼承自O(shè)bject原型上的方法
o.hasOwnProperty("hasOwnProperty");//false 繼承自O(shè)bject原型上的方法
3.修改原型鏈后hasOwnProperty()的指向例子
下面的列子演示了hasOwnProperty()方法對(duì)待修改原型鏈后繼承屬性的區(qū)別
var o={name:'jim'};
function Person(){
this.age=19;
}
Person.prototype=o;//修改Person的原型指向
p.hasOwnProperty("name");//false 無(wú)法判斷繼承的name屬性
p.hasOwnProperty("age");//true;
4.使用hasOwnProperty()遍歷一個(gè)對(duì)象自身的屬性
下面的列子演示了如何在遍歷一個(gè)對(duì)象忽略掉繼承屬性,而得到自身屬性。
注意· forin 會(huì)遍歷出對(duì)象繼承中的可枚舉屬性
var o={
gender:'男'
}
function Person(){
this.name="張三";
this.age=19;
}
Person.prototype=o;
var p =new Person();
for(var k in p){
if(p.hasOwnProperty(k)){
console.log("自身屬性:"+k);// name ,age
}else{
console.log("繼承別處的屬性:"+k);// gender
}
}
5.hasOwnProperty方法有可能會(huì)被覆蓋
如果一個(gè)對(duì)象上擁有自己的hasOwnProperty()方法,則原型鏈上的hasOwnProperty()的方法會(huì)被覆蓋掉
var o={
gender:'男',
hasOwnProperty:function(){
return false;
}
}
o.hasOwnProperty("gender");//不關(guān)寫什么都會(huì)返回false
//解決方式,利用call方法
({}).hasOwnProperty.call(o,'gender');//true
Object.prototype.hasOwnProperty.call(o,'gender');//true
二、Object.prototype.isPrototypeOf()
概述
isPrototypeOf()方法測(cè)試一個(gè)對(duì)象是否存在另一個(gè)對(duì)象的原型鏈上
語(yǔ)法
//object1是不是Object2的原型,也就是說Object2是Object1的原型,,是則返回true,否則false object1.isPrototypeOf(Object2);
描述
isPrototypeOf()方法允許你檢查一個(gè)對(duì)像是否存在另一個(gè)對(duì)象的原型鏈上
實(shí)例
1.利用isPrototypeOf()檢查一個(gè)對(duì)象是否存在另一個(gè)對(duì)象的原型上
var o={};
function Person(){};
var p1 =new Person();//繼承自原來(lái)的原型,但是現(xiàn)在已經(jīng)無(wú)法訪問
Person.prototype=o;
var p2 =new Person();//繼承自o
console.log(o.isPrototypeOf(p1));//false o是不是p1的原型
console.log(o.isPrototypeof(p2));//true o是不是p2的原型
2.利用isPropertyOf()檢查一個(gè)對(duì)象是否存在一另一個(gè)對(duì)象的原型鏈上
var o={};
function Person(){};
var p1 =new Person();//繼承自原來(lái)的原型,但是現(xiàn)在已經(jīng)無(wú)法訪問
Person.prototype=o;
var p2 =new Person();//繼承自o
console.log(o.isPrototypeOf(p1));//false o是不是p1的原型
console.log(o.isPrototypeof(p2));//true o是不是p2的原型
console.log(Object.prototype.isPrototypeOf(p1));//true
console.log(Object.prototype.isPrototypeOf(p2));//true
p1的原型鏈結(jié)構(gòu)是p1=>原來(lái)的Person.prototype=>Object.prototype=>null
p2的原型鏈結(jié)構(gòu)是p2=> o =>Object.prototype=>null
p1和p2都擁有Object.prototype所以他們都在Object.Prototype的原型鏈上
三、總結(jié)
1.hasOwnProperty:是用來(lái)判斷一個(gè)對(duì)象是否有你給出名稱的屬性或?qū)ο?。不過需要注意的是,此方法無(wú)法檢查該對(duì)象的原型鏈中是否具有該屬性,該屬性必須是對(duì)象本身的一個(gè)成員。
2.isPrototypeOf是用來(lái)判斷要檢查其原型鏈的對(duì)象是否存在于指定對(duì)象實(shí)例中,是則返回true,否則返回false。
以上所述是小編給大家介紹的JS中的hasOwnProperty()和isPrototypeOf()屬性實(shí)例詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)現(xiàn)頁(yè)面長(zhǎng)時(shí)間不操作退出到登錄頁(yè)面的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面長(zhǎng)時(shí)間不操作退出到登錄頁(yè)面的示例代碼,通過在head標(biāo)簽中引入jquey和頁(yè)面長(zhǎng)時(shí)間不操作的js頁(yè)面,結(jié)合實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
javascript在事件監(jiān)聽方面的兼容性小結(jié)
javascript 在事件監(jiān)聽方面的兼容性總結(jié),注意是由于多個(gè)瀏覽器的不一致,導(dǎo)致大家在js書寫時(shí)需要考慮多個(gè)瀏覽器的兼容性。2010-04-04
操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
在一些購(gòu)物平臺(tái)經(jīng)常需要將商品加入購(gòu)物車,像加入購(gòu)物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕都是按鈕懸浮底部的,怎么實(shí)現(xiàn)這樣的功能呢?下面小編給大家?guī)?lái)了操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼,一起看看吧2019-08-08
javascript document.referrer 用法
document對(duì)象的referrer屬性,返回導(dǎo)航到當(dāng)前網(wǎng)頁(yè)的超鏈接所在網(wǎng)頁(yè)的URL。2009-04-04

